element插件怎么用,vue使用element-ui组件
ElementUI是一套基于某视频剪辑软件的桌面端组件库，封装好了很多常用的用户界面组件，下面这篇文章主要给大家介绍了关于某视频剪辑软件中elementUI里面一些插件的使用方法，文中通过实例代码介绍的非常详细，需要的朋友可以参考下
目录
全屏插件的引用动态主题的设置多语言实现初始化多语言包引入自定义语言包封装多语言插件总结
全屏插件的引用
全屏功能可以使用插件来实现
第一步，安装全局插件screenfull
国家预防机制一全屏@5.1.0
第二步，封装全屏显示的插件ScreenFull/index.vue
模板
差异
！-放置一个按钮-
El-button class= icon @ click=更改屏幕全屏/el-button
/div
/模板
脚本
从"全屏"导入全屏
导出默认值{
方法：{
//改变全屏
更改屏幕(){
如果(!ScreenFull.isEnabled) {
//此时全屏不可用
这个message.warning(此时全屏组件不可用)
返回
}
//文档。文档元素。请求全屏()原生射流研究…调用
//如果可用就可以全屏
ScreenFull.toggle()
}
}
}
/脚本
样式范围。图标{
宽度：40px
高度：40px
背景色：# ff0
}
/风格
第三步，全局注册该组件main.js
从全屏幕导入/满屏
Vue.component(ScreenFull ，ScreenFull) //注册全屏组件
第四步，放置于App.vue中
模板
div id=应用程序
//全屏按钮
全屏/
/div
/模板
脚本
导出默认值{
名称："应用程序"
}
/脚本
动态主题的设置
我们想要实现在页面中实时的切换颜色，此时页面的主题可以跟着设置的颜色进行变化
简单说明一下它的原理：元素-用户界面2.0版本之后所有的样式都是基于半导体色敏传感器编写的，所有的颜色都是基于几个基础颜色变量来设置的，所以就不难实现动态换肤了，只要找到那几个颜色变量修改它就可以了。首先我们需要拿到通过package.json拿到元素-用户界面的版本号，根据该版本号去请求相应的样式。拿到样式之后将样色，通过正则匹配和替换，将颜色变量替换成你需要的，之后动态添加风格标签来覆盖原有的钢性铸铁样式。
第一步，封装颜色选择组件ThemePicker代码地址：@/components/ThemePicker。
实现代码
模板
埃尔颜色选择器
v-model=主题
:predefine=[#409EFF ， #1890ff ， #304156 ， #212121 ， #11a983 ， #13c2c2 ， #6959CD ， #f5222d ，]
主题选择器
popper-class=主题选择器下拉列表
/
/模板
脚本
const version=require( element-ui/package。JSON’).版本//来自节点_模块的元素用户界面版本
const ORIGINAL _ THEME= # 409 eff //默认颜色
导出默认值{
data() {
返回{
粉笔： ，//主题内容-粉笔css
主题：""
}
},
计算值：{
defaultTheme() {
归还这个10.25 $ store . state . settings . theme
}
},
观察：{
默认主题：{
处理程序：函数(瓦尔，老瓦尔){
this.theme=val
},
即时：正确
},
异步主题(瓦尔){
const oldVal=this.chalk？主题：原创主题
if (typeof val！==string )返回
const主题集群=this。gettheme集群(val。替换( # ，))
const原始群集=this。getthemecluster(老瓦尔。替换( # ，))
console.log(themeCluster，originalCluster)
const $message=this .$message({
消息："正在编译主题",
自定义类别：主题-消息，
类型："成功",
持续时间：0,
iconClass: el-icon-loading
})
const getHandler=(变量，id)={
return ()={
const原始群集=this。gettheme集群(ORIGINAL _ theme。替换( # ，))
const new style=this。更新样式(this[variable]，originalCluster，themeCluster)
让样式标签=文档。getelementbyid(id)
如果(!styleTag) {
样式标签=文档。createelement(“样式”)
styleTag.setAttribute(id ，id)
文档。头。appendchild(样式标签)
}
styleTag.innerText=newStyle
}
}
如果(!这个。粉笔){
const URL= https://UNP kg。com/element-ui @ $ { version }/lib/theme-chalk/index。 CSS
等待this.getCSSString(url， chalk )
}
const chalk handler=getHandler( chalk ， chalk-style )
粉笔处理器()
const styles=[]。切片。调用(文档。查询选择器all( style ))。过滤器(style={
const text=style.innerText
返回新的RegExp(oldVal， I ).测试（正文)!/粉笔变量/。测试（文本)
})
styles.forEach(style={
const { innerText }=style
if (typeof innerText！==string )返回
风格。innerText=this。更新样式(innerText、originalCluster、themeCluster)
})
这个emit(change ，val)
$message.close()
}
},
方法：{
updateStyle(style，oldCluster，newCluster) {
让新风格=风格
oldCluster.forEach((color，index)={
新风格=新风格。replace(new RegExp(color， ig )，newCluster[index])
})
返回新样式
},
getCSSString(url，变量){
返回新承诺(resolve={
const xhr=new XMLHttpRequest()
xhr.onreadystatechange=()={
if(xhr。就绪状态===4 xhr。状态===200){
这个[变量]=xhr.responsetext.replace(/@font-face{[^}]}/，“”)
解决()
}
}
xhr.open(GET ，url)
xhr.send()
})
},
getThemeCluster(主题){
const tintColor=(颜色，色调)={
设red=parseInt(color.slice(0，2)，16)
设green=parseInt(color.slice(2，4)，16)
设blue=parseInt(color.slice(4，6)，16)
if (tint===0) { //当原色在其rgb空间中时
返回[红、绿、蓝]。联接(,)
}否则{
red=Math.round(色调* (255 -红色))
green=Math.round(色调* (255 -绿色))
blue=Math.round(色调* (255 -蓝色))
red=red.toString(16)
green=green.toString(16)
blue=blue.toString(16)
return `#${red}${green}${blue} `返回返回
}
}
const shadeColor=(颜色，阴影)={
设red=parseInt(color.slice(0，2)，16)
设green=parseInt(color.slice(2，4)，16)
设blue=parseInt(color.slice(4，6)，16)
red=Math.round((1色)*红色)
green=Math.round((1色)*绿色)
blue=Math.round((1色)*蓝色)
red=red.toString(16)
green=green.toString(16)
blue=blue.toString(16)
return `#${red}${green}${blue} `返回返回
}
常量群集=[主题]
对于(设I=0；I=9；i ) {
clusters.push(tintColor(theme，Number((i/10))。toFixed(2))))
}
clusters.push(shadeColor(theme，0.1))
返回群集
}
}
}
/脚本
风格。主题-信息，主题选择器下拉菜单{
z指数：99999!重要；
}。主题选择器100 . El颜色选择器_ _触发器{
高度：26px！重要；
宽度：26px！重要；
填充：2px
}。主题选择器下拉菜单el-color-dropdown__link-btn {
显示：无；
}。埃尔颜色选择器{
身高：自动！重要；
}
/风格
注册代码
从导入主题选择器./主题选取器
Vue.component(ThemePicker ，ThemePicker)
第二步，放置于App.vue中
模板
div id=应用程序
埃尔按钮类型="主要"按钮/el-button
埃尔分配器/
//放置动态主题按钮
主题选择器/主题选择器
/div
/模板
脚本
导出默认值{
}
/脚本
风格
/风格
使用vue-元素-管理模板二次开发的都可以使用
多语言实现
初始化多语言包
使用国际化i18n方案。通过vue-i18n而实现。
第一步，我们需要首先国际化的包
npm i vue-i18n@8
第二步，需要单独一个多语言的实例化文件 src/lang/index.js
从vue //导入某视频剪辑软件引入某视频剪辑软件
从" vue-i18n"//导入VueI18n引入国际化的包
从 element-ui/lib/locale/lang/en //导入元素引入饿英文包。
从 element-ui/lib/locale/lang/zh-cn //导入zh引入饿了么中文包。
Vue.use(VueI18n) //全球注册国际化包
导出默认的新VueI18n({
区域设置： zh ，//从cookie中获取语言类型。如果你不能得到它，它是中国的。
消息：{
恩：{
.elementEN //介绍饥饿英语语言包。
},
张：{
.elementZH //介绍饿了么中文语言包。
}
}
})
上面代码的功能是将元素的两种语言导入到
第三步，在main.js中对挂载 i18n的插件，并设置element为当前的语言
从“vue”导入Vue
从“element-ui”导入ElementUI
从“element-ui/lib/locale/lang/en”导入区域设置
//将元素设置为当前语言
从“@/lang/index”导入i18n
Vue.use(ElementUI，{ locale })
新Vue({
埃尔： #app ，
i18n，
render: h=h(App)
})
引入自定义语言包
此时，element已经变成了zh，也就是中文，但是我们的常规内容如何按照当前的语言类型显示呢？
在这里，我们可以为英文和中文打包不同的语言包src/lang/zh.js , src/lang/en.jssrc/lang/zh.js。
导出默认值{
郎：{
仪表板：“主页”，
虫子：“虫子就是虫子”
}
}
src/lang/en.js
导出默认值{
郎：{
仪表板：“仪表板”，
臭虫：“臭虫是一只臭虫”
}
}
第四步，在index.js中同样引入该语言包
从导入zh。/zh //介绍自定义中文软件包
从导入。/en //引入自定义英文包。
Vue.use(VueI18n) //全球注册国际化包
导出默认的新VueI18n({
区域设置： zh ，//从cookie中获取语言类型。如果你不能得到它，它是中国的。
消息：{
恩：{
.elementEN，//介绍饥饿英语语言包。
.客户
},
张：{
.elementZH，//介绍一下饿了么中文语言包。
.海关ZH
}
}
})
如何使用自定义语言包的内容？
第五步，在App.vue中应用
我们在全局注册i18n的时候，每个组件都会有一个$t的方法，会根据来话键自动找到当前语言的文本，我们可以把左侧菜单变成多语种显示文本。
App.vue
模板
div id=应用程序
h1 v-text= $ t( lang . dashboard )/h1
h1 v-text=$t(lang.bug)/h1
/div
/模板
注：文本值嵌套时，可由$t(key1.key2.key3...)获取。
既然已经完成了对多种语言的访问，那么就将用于切换多种语言的组件打包。
封装多语言插件
第六步，封装多语言组件src/components/lang/index.vue
模板
El-drop down trigger= click @ command= change language
！-您必须在此处添加一个div
差异
El-button type=primary 开关多语言/el-button
/div
El-drop down-菜单slot=dropdown
El-dropdown-item命令= zh :disabled= zh ==$ i18n . locale 中文/el-dropdown-item
El-drop down-item command= en :disabled= en ===$ i18n . locale en/El-drop down-item
/El-下拉菜单
/El-下拉菜单
/模板
脚本
导出默认值{
方法：{
更改语言(语言){
这个。$i18n.locale=lang //设置为本地i18n插件。
这个。$message.success(“多语言切换成功”)
}
}
}
/脚本
第七步，在App.vue中引入
！-切换多种语言-
模板
div id=应用程序
郎/
el分配器/
el分配器/
el分配器/
h1 v-text= $ t( lang . dashboard )/h1
h1 v-text=$t(lang.bug)/h1
/div
/模板
总结
这篇关于vue的elementUI中一些插件的使用方法的文章到此为止。有关vueelementUI插件使用的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。