随笔分类 - vue
摘要：MyButton.vue： <template> <button :class="['my-btn',btnClass]"> <slot name='btnText'></slot> </button> </template> <script> export default { props: { b
阅读全文
摘要：<template> <div id="app"> <h1>axios拦截器</h1> <button @click="handleClick">按钮</button> <p>{{title}}</p> <div v-if="loading">loading...</div> </div> </te
阅读全文
摘要：<li v-for="(item,index) in list" :key="index" class="common" :class="index currentIndex?'active':''">{{item}}</li> <li v-for="(item,index) in list" :k
阅读全文
摘要：创建一个HelloWorld组件： <script> import Test from '@/components/Test' export default { props: { tag: String }, data() { return { arr: ['小王', '小明', '小红'] } }
阅读全文
摘要：1、通过改变父组件中的状态，从而改变兄弟组件的状态 Parent.vue： <template> <div> <h1>父组件</h1> <p>{{name}}</p> <Child1 :name='name' @child1Click='name = $event' /> <Child2 :name
阅读全文
摘要：1、props+$emit Parent.vue： <template> <div> <h1>父组件</h1> <p>{{message}}</p> <Child :message='message' @messageChange='message=$event' /> </div> </templ
阅读全文
摘要：效果： 使用 show-overflow-tooltip 无法设置hover状态时的样式，改用 el-tooltip 1、 <el-table-column label="核心使用场景" min-width='300'> <template scope="scope"> <el-tooltip ef
阅读全文
摘要：效果： 1、设置 render-header <el-table-column prop="levelname" label="层次" width="180" show-overflow-tooltip :render-header="renderTableHeader" /> 2、renderTa
阅读全文
摘要：pdfjs在pc端预览：https://www.cnblogs.com/wuqilang/p/13031290.html 当使用pdfjs在移动端预览时显示不出来，pc端调式是可以的，到了手机上 就不行。 使用pdfjs： 1、下载：npm install pdfh5 2、使用： <template
阅读全文
摘要：优化点：选中的年份由父组件传入，不传即默认为空 step： 1、SchoolYear.vue： <template> <el-select v-model="currentYear"> <el-option v-for="item in tempYearList" :key="item.value"
阅读全文
摘要：需求： 1、封装一个下拉框组件，选择学年 2、学年list默认是组件自带，如果父组件传值了用父组件传来的 3、默认选中当前年份 step： 1、components中定义SchoolYear.vue /** * props: * yearList // select数据 格式： [{text, va
阅读全文
摘要：1、components下新建MyTable/index.vue <template> <div class="my-table"> <el-table :data='tableData' :header-cell-style='headerCellStyle'> <slot></slot> </e
阅读全文
摘要：store.js如下： import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { value: 100 }, mutations: { updateValu
阅读全文
摘要：<div v-for="(item,index) in color" :key="index" v-if="flag"> {{item}} </div> data() { return { color: ['red', 'yellow', 'blue'], flag: true } } 这样可以渲染
阅读全文
摘要：效果： 一、通过watch监听和methods进行数据交互 DOM结构： <template> <div id="app"> <ul> <li><input type="checkbox" v-model="allCheck" @click="handleAllCheck" />全选</li><br
阅读全文
摘要：<template> <div class="my-radio"> <ul> <li v-for="item in list" :key='item.id'> <div class="name"> <span>{{item.userName}}</span> </div> <van-radio-gr
阅读全文
摘要：<template> <div class="my-radio"> <ul> <li v-for="item in list" :key='item.id'> <div class="name"> <span>{{item.userName}}</span> </div> <van-radio-gr
阅读全文
摘要：效果图： 需求： 1、根据接口数据渲染list中每条数据，operationType 1则【仅查看】高亮，operationType 2则【可编辑】高亮 2、如果list中的所有数据都是【仅查看】，那么底部的【全部设置为仅查看】高亮，反之【全部设置为可编辑】高亮。如果既有【仅查看】又有【可编辑】，那
阅读全文
摘要：1、lazy <input type="text" v-model="name"> 相当于 <input type="text" :value="name" @input="(e)=>name=e.target.value"> 加上lazy修饰符 <input type="text" v-model
阅读全文
摘要：1、在textarea标签中使用 <textarea v-model="name"></textarea> <p>{{name}}</p> 问题： 在data中的数据已经加上换行符 \n 了，但是页面渲染时并没有换行 解决： 给p标签添加样式 <p style="white-space:pre-li
阅读全文
