学习Ionic Vue

参考链接

集成步骤

  1. 引入库:
 "@ionic/core": "latest",
 "@ionic/vue": "^0.0.4",

  1. 引入@ionic/vue相关组件:
import Vue from 'vue'
import Ionic from '@ionic/vue'
// Ionic all bundle css styles
import '@ionic/core/css/ionic.bundle.css'
import '../assets/css/ionic-variables.css'
Vue.use(Ionic)

其中的ionic-variables.css为自定义主题样式,内容如下:

/* Ionic Variables and Theming. For more info, please see: */
/* http://ionicframework.com/docs/theming/                 */

/** Ionic CSS Variables **/
:root {
    /** primary **/
    --ion-color-primary: #3880ff;
    --ion-color-primary-rgb: 56, 128, 255;
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-contrast-rgb: 255, 255, 255;
    --ion-color-primary-shade: #3171e0;
    --ion-color-primary-tint: #4c8dff;

    /** secondary **/
    --ion-color-secondary: #0cd1e8;
    --ion-color-secondary-rgb: 12, 209, 232;
    --ion-color-secondary-contrast: #ffffff;
    --ion-color-secondary-contrast-rgb: 255, 255, 255;
    --ion-color-secondary-shade: #0bb8cc;
    --ion-color-secondary-tint: #24d6ea;

    /** tertiary **/
    --ion-color-tertiary: #7044ff;
    --ion-color-tertiary-rgb: 112, 68, 255;
    --ion-color-tertiary-contrast: #ffffff;
    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
    --ion-color-tertiary-shade: #633ce0;
    --ion-color-tertiary-tint: #7e57ff;

    /** success **/
    --ion-color-success: #10dc60;
    --ion-color-success-rgb: 16, 220, 96;
    --ion-color-success-contrast: #ffffff;
    --ion-color-success-contrast-rgb: 255, 255, 255;
    --ion-color-success-shade: #0ec254;
    --ion-color-success-tint: #28e070;

    /** warning **/
    --ion-color-warning: #ffce00;
    --ion-color-warning-rgb: 255, 206, 0;
    --ion-color-warning-contrast: #ffffff;
    --ion-color-warning-contrast-rgb: 255, 255, 255;
    --ion-color-warning-shade: #e0b500;
    --ion-color-warning-tint: #ffd31a;

    /** danger **/
    --ion-color-danger: #f04141;
    --ion-color-danger-rgb: 245, 61, 61;
    --ion-color-danger-contrast: #ffffff;
    --ion-color-danger-contrast-rgb: 255, 255, 255;
    --ion-color-danger-shade: #d33939;
    --ion-color-danger-tint: #f25454;

    /** dark **/
    --ion-color-dark: #222428;
    --ion-color-dark-rgb: 34, 34, 34;
    --ion-color-dark-contrast: #ffffff;
    --ion-color-dark-contrast-rgb: 255, 255, 255;
    --ion-color-dark-shade: #1e2023;
    --ion-color-dark-tint: #383a3e;

    /** medium **/
    --ion-color-medium: #989aa2;
    --ion-color-medium-rgb: 152, 154, 162;
    --ion-color-medium-contrast: #ffffff;
    --ion-color-medium-contrast-rgb: 255, 255, 255;
    --ion-color-medium-shade: #86888f;
    --ion-color-medium-tint: #a2a4ab;

    /** light **/
    --ion-color-light: #f4f5f8;
    --ion-color-light-rgb: 244, 244, 244;
    --ion-color-light-contrast: #000000;
    --ion-color-light-contrast-rgb: 0, 0, 0;
    --ion-color-light-shade: #d7d8da;
    --ion-color-light-tint: #f5f6f9;
}

  1. 修改App.vue文件,使得ion-app为顶级渲染节点,可以识别不同的设备,从而加载不同的主题样式:
<template>
  <ion-app>
    <ion-vue-router />
  </ion-app>
</template>

<script>

export default {
  name: 'App',
  methods: {
  }
}
</script>
<style>
</style>

  1. 路由设置,修改路径为@ionic/vue中定制的路由,这个路由跟vue-router是一样的,但是功能可能更多:
import Vue from 'vue'
import { IonicVueRouter } from '@ionic/vue'
import routes from './routes'

Vue.use(IonicVueRouter)

const router = new IonicVueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: routes
})

export default router


坑/问题

  • 在查看ion-tabs时发现用到了命名视图,这个确实很坑啊,以前都一直都用到的是通过命名路由的方式进行导航的. 认真阅读官方文档:命名视图

  • <ion-input>不能使用v-model,两种方式解决:

    • 第一种如下的语法糖代码调整:
    <ion-input
    :value="selectedOption"
      @ionChange="selectedOption= $event.target.value"
      >
    
  • type=numbervee-validate中不起作用,使用了v-validate="{digits: 4}",原因是:

    This is caused by vee-validate trying to validate the field based on their HTML attributes, for number fields the decimal rule is automatically added. You can turn that behavior off like this: Vue.use(VeeValidate, { useConstraintAttrs: false }); The problem is that decimal and integer are conflicting rules by definition, so it is advised not to use both at the same time. So Turning the behavior off is the easiest solution for you.

    然后看到官方文档提到,有些html5的内置类型和属性,是不需要在添加v-validate进行详细的验证的,只需要添加一个v-validate就可以了,参考:官方指南:

    Inferred Rules Reference

This is a table of HTML attributes that is inferred as rules.

Attribute value Rule
type "email" email
type "number" decimal
type "date" date_format:YYYY-MM-DD
type "datetime-local" date_format: YYYY-MM-DDThh:mm
type "time" date_format:hh:mm or date_format:hh:mm:ss depending on the step value
type "week" date_format:YYYY-Www
type "month date_format:YYYY-MM
min val min_value:val
max val max_value:val
pattern rgx regex: rgx
required none required
maxlength "val" max: val
minlength "val" min: val

This feature does not work on custom components, only HTML5 inputs can take advantage from this feature. 所以还是采用作者的提议,因为我们使用的是ionic web component, 所以上面的规则还是不适用

For convenience, you may add the data-vv-scope attribute on the form that owns the inputs, you don't have to add the attribute on every input. You can also pass scope property to the validator expression. 不必每个字段都添加一个scope的属性,这个问题在旧版本中还是需要加上scope的,见问题: How to validate two different forms on one page? #1206

  • ionic 中的color自定义: https://ionicframework.com/docs/theming/advanced#colors
最后更新: 5/2/2019, 12:11:48 AM
本文浏览量