搜索到
29
篇与
的结果
-
Vue使用NProgress NProgressNProgress就是在页面顶端显示一个进度条。安装npm install --save nprogress使用引入NProgress我们新建一个global.js文件，通过钩子，在路由开始前，启动NProgress，路由结束后，停止NProgressimport NProgress from 'nprogress' import 'nprogress/nprogress.css' import router from './router' router.beforeEach((to, from, next) => { NProgress.start() setTimeout(() => { next() }, 1000) } ) router.afterEach((to, from) => { NProgress.done() })在main.js中引入global.jsimport './global'NProgress方法说明//方法 NProgress.start() - 显示进度条 NProgress.set(0.4) - 设置百分比 NProgress.inc() - 稍微增加 NProgress.done() - 完成进度(进度条消失)修改NProgress颜色颜色配置是在App.vue中的加入样式#nprogress .bar { background: red !important; }NProgress配置可以通过调用 .set(n)来设置进度，n是0-1的数字。 NProgress.set(0.0); // Sorta same as .start() NProgress.set(0.4); NProgress.set(1.0); // Sorta same as .done() 可以使用inc()随机增长进度条，注意，这个方法永远不会让进度条达到100%。 NProgress.inc(); NProgress.configure({ showSpinner: false }) //禁用进度环 NProgress.configure({ trickle : false }) //关闭进度条步进 NProgress.configure({ trickleRate : 10}) //每次步进增长多少 NProgress.configure({ trickleSpeed : 200}) //每次步进间隔，单位毫秒ms NProgress.configure({ easing: 'linear'}) //动画方向 NProgress.configure({ speed : 10}) //动画速度，单位毫秒ms NProgress.configure({ minimum : 0.08}) //最小百分比spinner即右侧的一个东西 -
修改elementUI中el-table树形结构图标 elementUI中的表格，可以显示成树形的结构，默认的样式，跟el-tree的样式一样，el-table如果是树形结构的话，如果树形有下级的话，显示的是一个小三角号，如果没有下级的话，是没有图标的。感觉这种图标不是特别好看，为了美化，我们可以替换成自己的图标。如果我们想改变树形的图标，可以在vue的style中加入以下样式<style scoped> .el-tree /deep/ .el-tree-node__expand-icon.expanded { -webkit-transform: rotate(0deg); transform: rotate(0deg); } /*有子节点 且未展开*/ .el-table /deep/ .el-table__expand-icon .el-icon-arrow-right:before { background: url('../../../../assets/images/文件夹未展开.png') no-repeat; content: ''; display: block; width: 16px; height: 16px; font-size: 16px; background-size: 16px; } /*有子节点 且已展开*/ .el-table /deep/ .el-table__expand-icon--expanded{ -webkit-transform: rotate(0); transform: rotate(0); } .el-table /deep/ .el-table__expand-icon--expanded .el-icon-arrow-right:before { background: url('../../../../assets/images/文件夹展开.png') no-repeat; content: ''; display: block; width: 16px; height: 16px; font-size: 16px; background-size: 16px; } /*没有子节点*/ .el-table /deep/ .el-table__placeholder::before { background: url('../../../../assets/images/文件.png') no-repeat; content: ''; display: block; width: 16px; height: 16px; font-size: 16px; background-size: 16px; } </style>
-
vue前端生成二维码插件 安装插件 npm i qrcode -s引入插件import Vue from 'vue' import App from './App.vue' import QRCode from 'qrcode' Vue.use(QRCode) Vue.prototype.$QRCode = QRCode new Vue({ el: '#app', a:'123', render: h => h(App) }) 使用<template> <div id="app"> <canvas id="canvas"></canvas> </div> </template> <script> import popup from "./components/popup.vue"; export default { components: { popup }, name: "app", data() { return {}; }, mounted: function () { var cavas = document.getElementById("canvas") this.$QRCode.toCanvas(canvas,'https://lisen.cc') }, computed: { }, methods: { }, }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
-
vue状态管理与vuex 安装vuexnpm i vuex -s创建数据仓库创建store文件夹，并在文件夹下创建index.js文件import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { count: 0 }, mutations: { increment: state => state.count++, decrement: state => state.count-- } })引入数据仓库在main.js中引入我们定义的数据仓库。import Vue from 'vue' import App from './App.vue' import store from '@/store' new Vue({ el: '#app', store, render: h => h(App) })使用<template> <div id="app"> {{ count }} <button @click="increment">++</button> <button @click="decrement">--</button> </div> </template> <script> import popup from "./components/popup.vue"; export default { components: { popup }, name: "app", data() { return {}; }, mounted: function () {}, computed: { count() { return this.$store.state.count; }, }, methods: { increment: function () { this.$store.commit('increment') }, decrement: function () { this.$store.commit('decrement') }, }, }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>每次点++按钮，count自动+1
-
vue基础之slot内容分发（插槽） 什么是slotslot的官方定义是用于组件内容分发，简单通俗的解释就是在组件化开发中，虽然组件都是一样的，但是在不同的使用场景，组件的某一部分需要有不同的内容显示（slot还有一个形象的名字“插槽”），slot就好比在组件开发过程中定义的一个参数（通过name值来区分），如果不传入值就当默认值使用，如果传入了新值，在组件调用时就会替换定义时的slot默认值。slot分为以下两类":匿名slot具名slot匿名slot匿名slot顾名思义就是没有名字的插槽，特点是可以放任何内容。首先设想一个弹出提示框的场景，提示框都包含头部、中间内容和底部内容三部分。一般情况下头部、底部是固定不变的，只有中间内容可以任意放置。下面我们我们基于以上场景说一下匿名插槽的使用。新建组件我们创建一个名称为popup.vue的组件。<template> <div> <div>这是标题</div> <slot>这部分内容会被替换</slot> <div>这是底部内容</div> </div> </template> <script> export default {}; </script>引用组件我们在app.vue中引入刚才定义的组件。不替换插槽内容我们先只引入组件，不替换slot的内容<template> <div id="app"> <popup> </popup> </div> </template> <script> import popup from './components/popup.vue'; export default { components: { popup }, name: "app", data() { return { msg: "Welcome to Your Vue.js App1", }; }, mounted: function () {}, }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>可以看到，slot显示的是默认的内容。替换插槽内容这一次，我们替换slot的内容，修改app.vue如下<template> <div id="app"> <popup> 这部分内容会被替换 </popup> </div> </template> <script> import popup from './components/popup.vue'; export default { components: { popup }, name: "app", data() { return { msg: "Welcome to Your Vue.js App1", }; }, mounted: function () {}, }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>再次运行，查看内容可以看到，slot内容被替换成了我们app.vue中的内容。{message type="success" content="一个组件中，如果有多个匿名的slot，那么所有的slot都会被替"/}具名slot正如上面提到的，一个组件中，如果有多个匿名的slot，那么所有的slot都会被替换，还是上面的场景，如果我们的标题、中间部分及底部都是可替换的，显然匿名slot就无法解决我们的问题。针对这个场景，我们就可以使用具名slot。具名slot就是有名字的插槽，一旦有了名字，我们就可以针对特定的插槽进行替换。修改popup.vue组件这次，我们把标题、中间部分及底部都做成插槽。<template> <div> <slot name="title">这是标题</slot> <slot name="content">这部分内容会被替换</slot> <slot name="footer">这是底部内容</slot> </div> </template> <script> export default {}; </script>修改app.vue<template> <div id="app"> <popup> <div slot="title">这是替换后的标题</div> <div slot="content">这是替换后的内容</div> <!-- 不替换底部，显示的是默认值 --> </popup> </div> </template> <script> import popup from './components/popup.vue'; export default { components: { popup }, name: "app", data() { return { msg: "Welcome to Your Vue.js App1", }; }, mounted: function () {}, }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> 可以看到，替换的内容正确显示，没替换的内容显示了默认值。
-
Vue.use()的用法 介绍在vue的main.js中，我们经常使用Vue.use(xx)方法。比如我们引入elementUI，在main.js中，我们一般通过如下代码引入：import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI){message type="error" content="需要先通过npm i element-ui -S安装elementUI"/}原来在开发时，一直都是这么用，但是基本没留意过为什么这么弄。官方解释安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。什么意思呢？Vue.use() 中的参数必须是一个function函数或者是一个Object对象，如果是对象的话，必须在对象中提供一个install方法。之后会将 Vue 作为参数传入。我们分两点来看：如果Vue.use() 中的参数是一个function函数，那么函数的参数是Vue对象。2. 如果Vue.use() 中的参数是一个Object对象，那么这个对象必须提供一个install方法，install方法的参数就是Vue。Demo演示我们通过以下两个Demo来分别演示一下上面说的两种情况。Object对象我们通过自定义一个主键的形式进行演示说明。创建项目vue init webpack-simple custom-global-component一路回车，然后执行npm run dev如果项目能正常启动代表创建成功。创建组件创建components文件夹，并创建loading.vue及index.js文件。目录结构如下loading.vue只是一个简单的组件，代码如下<template> <div> Laoding... </div> </template> <script> export default { } </script>在index.js，我们引入并注册定义的组件。import LoadingComponent from './loading.vue' const Loading = { install:function(Vue){ Vue.component('Loading',LoadingComponent) } } export default Loading在main.js中通过Vue.use()调用。import Loading from './components/loading' Vue.use(Loading)使用在App.vue中使用我们的组件。<template> <div id="app"> <Loading/> </div> </template>function函数创建函数function demo(Vue){ console.log(Vue) } export default demo引入在main.js中引入函数。import demo from './utils/func' Vue.use(demo)
-
-
Vue子组件的索引 在Vue中，当子组件较多时，通过this.$children来一一遍历我们需要的一个组件是比较困难的，尤其是组件动态渲染时，他们的序列是不固定的。Vue提供了子组件索引的方法，用特殊的属性ref为子组件指定一个索引的名字。<html> <head> <title>Vue学习</title> <script src="vue.js"></script> </head> <body> <div id="app"> <component-a ref="compA"></component-a> <button @click="handleMessage">获取组件A的内容</button> {{message}} </div> <script type="text/javascript"> Vue.component("component-a", { data: function () { return { message: '这是组件A的message' } }, template:'<div></div>' }) var app = new Vue({ el: '#app', data: { message: '' }, methods: { handleMessage: function () { this.message = this.$refs.compA.message } } }) </script> </body> </html>
-
Vue中文输入法实时更新数据值 使用v-model是，如果是用中文输入法输入中文，一般在没有选定词组前，也就是在拼音阶段，Vue是不会更新数据的，当敲下汉字时才会触发更新，如果希望总是实时更新，可以用@input来替代v-model。<html> <head> <title>Vue学习</title> <script src="vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="message" placeholder="请输入"> <input type="text" placeholder="实时更新" @input="handleInput"> <p> {{message}} </p> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: '' }, methods:{ handleInput:function(e){ this.message=e.target.value } } }) </script> </body> </html>
-
Vue+element-ui导出el-table中的数据 1.先安装依赖npm install --save xlsx file-saver2.在要导出的vue组件中的script引入import FileSaver from "file-saver" import XLSX from "xlsx"3.导出方法exportExcel() {//执行此方法导出Excel表格 // 为el-table添加一个id：out-table // 当el-table使用了fixed时会导出两次数据，所以要先进行判断 var fix = document.querySelector('.el-table__fixed'); var wb; if (fix) { // 如果有fixed，先移除，然后再添加上 wb = XLSX.utils.table_to_book(document.querySelector("#out-table").removeChild(fix)) document.querySelector("#out-table").appendChild(fix) }else{ wb = XLSX.utils.table_to_book(document.querySelector("#out-table")) } var wbout = XLSX.write(wb, { bookType: "xlsx", bookSST: true, type: "array" }); try { FileSaver.saveAs( new Blob([wbout], { type: "application/octet-stream" }), // 导出的文件名称 "Data.xlsx" ) } catch (e) { if (typeof console !== "undefined") console.log(e, wbout); } return wbout; },这个方法也存在问题，比如样式不够灵活等。
-
el-datepicker设置可选日期范围 1.只能选择当前及以后的日期<el-date-picker v-model="value1" type="date" :picker-options="pickerOptions"> </el-date-picker> data() { return { pickerOptions: { disabledDate(time) { return time.getTime() < Date.now() - 8.64e7; } }, }2.只能选择今天以及今天以前的日期data (){ return { pickerOptions: { disabledDate(time) { return time.getTime() > Date.now() - 8.64e6 } }, } }3.只能选择今天之后的日期data (){ return { pickerOptions: { disabledDate(time) { return time.getTime() < Date.now(); } }, } }4.只能选择今天之前的日期data (){ return { pickerOptions0: { disabledDate(time) { return time.getTime() > Date.now(); } }, } }5.设置选择三个月之前到今天的日期data (){ return { pickerOptions0: { disabledDate(time) { let curDate = (new Date()).getTime(); let three = 90 * 24 * 3600 * 1000; let threeMonths = curDate - three; return time.getTime() > Date.now() || time.getTime() < threeMonths;; } }, } }组件代码<el-date-picker v-model="value1" type="date" placeholder="开始日期" :picker-options="pickerOptions0"> </el-date-picker> <el-date-picker v-model="value2" type="date" placeholder="结束日期" :picker-options="pickerOptions1"> </el-date-picker>
-
