ivue_全局配置

1、全局配置

全局配置
使用 iView 3 时,可以进行全局配置组件的一些属性。

组件会优先使用 prop 设置的属性,如果未设置,再使用全局配置。

  • transfer:所有带浮层的组件,是否将浮层放置在 body 内,默认为不设置,详见各组件默认的 transfer 值。可选值为 true 或 false。
  • size:所有带有 size 属性的组件的尺寸,默认为不设置,详见各组件默认的 size 值。可选值为 default、small 或 large

用法如下:

Vue.use(iView, {
    transfer: true,
    size: 'large',
    select: {
        arrow: 'md-arrow-dropdown',
        arrowSize: 20
    }
});

2、定制主题

定制主题
iView 的样式是基于 Less 进行开发的,默认以前缀 .ivu- 作为命名空间,并且定义了一套样式变量,定制主题,就是编辑这个变量列表

  • 安装less及less-loader
npm install less@2.7.3 --save-dev
npm install less-loader@4.0.6 --save-dev
import Vue from 'vue'
import iView from 'iview'

Vue.use(iView,{
    size: 'large',
       transfer: true,
       select: {
           arrow: 'md-arrow-dropdown',
           arrowSize: 20
       }
   })
   
   // import 'iview/dist/styles/iview.css'
   
   // 自定义主题
   import '../my-theme/custom.less'
   

新建my-theme目录,custom.less文件,然后设置自定义样式,覆盖默认配置即可。

@import "~iview/src/styles/index.less";

// Color
@primary-color: #8c0776;

3、国际化

国际化

安装插件

cnpm install vue-i18n --save

main.js

// 引入以下三个包
import  VueI18n from 'vue-i18n'
import en from 'iview/dist/locale/en-US';
import zh from 'iview/dist/locale/zh-CN';

// 使用语言包及初始化
Vue.use(VueI18n);
Vue.locale = () => {};
// 业务代码
const messages = {
  en: Object.assign({ message: 'hello' }, en),
  zh: Object.assign({ message: '你好' }, zh)
};
// 默认使用的语言包
// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'en',  // set locale
  messages  // set locale messages
});

// 挂载
new Vue({
  render: h => h(App),
  i18n  // 缩写:i18n:i18n
}).$mount('#app')

App.vue 使用,$t(“message”)对应上面的业务代码即可

<template>
  <div id="app" style="margin: 200px">
      <span>{{ $t("message") }}</span>
  </div>
</template>
4、iView Loader

iView Loader
统一 iView 标签书写规范,所有标签都可以使用首字母大写的形式,包括 Vue 限制的两个标签 Switch 和 Circle

安装,首先通过 npm 安装 iview-loader

npm install iview-loader --save-dev

配置 webpack,改写平时 vue-loader 的配置,形如:

module: {
    rules: [
        {
            test: /\.vue$/,
            use: [
                {
                    loader: 'vue-loader',
                    options: {
                        
                    }
                },
                {
                    loader: 'iview-loader',
                    options: {
                        prefix: false // 是否开启书写的前缀
                    }
                }
            ]
        }
    ]
}

可以直接写 这两个标签;
参数 prefix 设置为 true 后,所有 iView 组件标签名都可以使用前缀 i-,例如 、

uView-plus 是一款基于 Vue.js 开发的高质量 UI 组件库,它提供了丰富的组件,使得开发者能够快速搭建出美观、易用的应用界面。在 Vue 3 中进行全局配置,主要的目的是为了让 uView-plus 组件能够全局可用,简化引入组件的代码,并可以自定义一些全局配置项。 在 Vue 3 中进行 uView-plus 的全局配置通常包括以下几个步骤: 1. 安装 uView-plus: 使用 npm 或 yarn 来安装 uView-plus 到项目中。 ```shell npm i uview-ui-plus # 或者 yarn add uview-ui-plus ``` 2. 在 main.js 中引入并使用 uView-plus: 在 Vue 3 的 main.js 文件中,首先导入 createApp 函数,然后创建 Vue 应用实例,并引入 uView-plus,最后使用应用实例挂载到根 DOM 元素上。 ```javascript import { createApp } from 'vue'; import App from './App.vue'; import uView from 'uview-ui-plus'; import 'uview-ui-plus/dist/styles/index.css'; const app = createApp(App); app.use(uView); app.mount('#app'); ``` 3. 配置全局变量(如果需要): 如果需要对 uView-plus 进行一些全局配置,可以在使用 uView-plus 之前设置全局变量,然后将它们传递给 uView-plus。例如,设置全局主题颜色: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import uView from 'uview-ui-plus'; import 'uview-ui-plus/dist/styles/index.css'; // 设置全局变量 const globalConfig = { dark: false, // 是否启用暗黑模式 theme: { primary: '#007aff', // 主题色 // 更多自定义主题选项... } }; const app = createApp(App); app.config.globalProperties.$u = globalConfig; // 挂载全局变量 app.use(uView); app.mount('#app'); ``` 4. 在组件中使用全局变量: 在 Vue 组件中,可以使用挂载的全局变量 `$u` 来访问之前设置的配置项。 ```vue <template> <div> <!-- 使用 uView-plus 组件 --> <u-button type="primary">按钮</u-button> </div> </template> <script> export default { // 使用全局变量中的主题色 computed: { primaryColor() { return this.$u.theme.primary; } } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值