写VUE项目中记录的点(element-ui,transition)
这里写目录标题1.Element-uiTooltip文字提示Badge 标记el-avatar 头像1.Element-uiTooltip文字提示Tooltip 文字提示 常用于展示鼠标 hover 时的提示信息Badge 标记Badge 标记 出现在按钮、图标旁的数字或状态标记。el-avatar 头像Avatar 头像用图标、图片或者字符的形式展示用户或事物信息若DOM图片不变 在 :src后
vue项目所记录的点
1.Element-ui
table
table的show-overflow-tooltip属性
用vue+element ui框架,用到table表格,如果每列显示的内容过长则可以使用该属性,即 :show-overflow-tooltip=“true”,该属性可以让内容在一行显示,如果显示不下时,显示…,并且鼠标划过时显示全部文字。通常会出现这样的效果:
table的表格树
:data="tableData"
row-key="id"
border
:tree-props="{ children: 'children' }"
:height="tableHeight"
v-loading="loading"
element-loading-text="正在加载中,请稍后..."
lazy
:load="loadChildren"
ref="table"
button 显示提示文本
<el-button type="text"
icon="el-icon-edit"
@click="edit(scope.row)"
title="编辑用户">
</el-button>
Tooltip文字提示
Tooltip 文字提示 常用于展示鼠标 hover 时的提示信息
Badge 标记
Badge 标记 出现在按钮、图标旁的数字或状态标记。
el-collapse-transition折叠展开
//点击切换,隐藏显示testshow
<template>
<div>
<div><button @click="cb">切换</button></div>
<el-collapse-transition>
<div v-if="show" class="testshow">
<div>sssssss</div>
<div>sssssss</div>
</div>
</el-collapse-transition>
</div>
</template>
<script>
export default {
data: () => ({
show: true
}),
methods: {
cb() {
this.show = !this.show;
},
}
}
</script>
el-avatar 头像
Avatar 头像用图标、图片或者字符的形式展示用户或事物信息
若DOM图片不变 在 :src后面加上:key值,就是:src的值
Tag 标签
Tag 标签用于标记和选择。
Popover 弹出框
trigger属性用于设置何时触发 Popover,支持四种触发方式:hover,click,focus 和 manual
当然,你还可以嵌套操作,这相比 Dialog 更为轻量:
<el-popover
placement="top"
width="160"
v-model="visible">
<p>这是一段内容这是一段内容确定删除吗?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="visible = false">取消</el-button>
<el-button type="primary" size="mini" @click="visible = false">确定</el-button>
</div>
<el-button slot="reference">删除</el-button>
// reference 触发 Popover 显示的 HTML 元素
</el-popover>
<script>
export default {
data() {
return {
visible: false,
};
}
}
</script>
DatePicker 日期选择器
表单组件的prop属性
Vue组件库element-ui中的Form表单组件提供了表单验证功能
通过rules属性传入验证规则
Form-Item中的prop属性设置需要校验的字段名
2.单元素/组件的过渡 transition
Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡.
条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点
例子讲解
点击Toggle时 ,hello消失
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
同时我们也可以自定义进入/离开的样式
如果你使用一个没有名字的 ,则 v- 是这些类名的默认前缀。如果你使用了 <transition name=fade">,那么 v-enter 会替换为 fade-enter
//v-enter-active:定义进入过渡生效时的状态。
.fade-enter-active {
transition: all .3s ease;
}
//v-leave-active:定义离开过渡生效时的状态
.-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
//CSS 动画用法同 CSS 过渡,区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除,而是在 animationend 事件触发时删除
@keyframes .fade-enter {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
3.this.$router.beforeEach
router.beforeEach()一般用来做一些进入页面的限制。
比如没有登录,就不能进入某些页面,只有登录了之后才有权限查看某些页面,说白了就是路由拦截.
//思路
> 如果(即将进入的这个路由需要权限才能进入){
> 如果(能获取到这个的userID){
> 就让这个进入这个路由
> } 否则 {
> 就让这个进入登陆页面
> }
> } 即将进入的路由不需要权限就能进入
> {
> 就让这个进入这个路由
> }
//代码实现
import store from '@/assets/store' //把这个userId获取过来
router.beforeEach((to,from,next)=>{
if(to.meta.requireAuth){
if(store.state.userId){
next()
}else{
next({path:'/login'})
}
}else{
next()
}
})
4.this.$nextTick
在进行获取数据后,需要对新视图进行下一步操作或者其他操作时,发现获取不到dom。因为赋值操作只完成了数据模型的改变并没有完成视图更新。在这个时候我们需要用到this.$nextTick。
所以如果我们想对未来更新后的视图进行操作,我们只需要把要执行的函数传递给this.$nextTick方法,vue就会给我们做这个工作。
5.$emit()
父组件可以使用 props 把数据传给子组件。
子组件可以使用 $emit 触发父组件的自定义事件。
6.JSON.stringify()
JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串
7.JSON.parse()
JSON.parse()可以将JSON字符串转为一个对象。
8.model实现自定义组件的双向数据绑定
v-model只是一个语法糖,等于:value+@input,真正的实现靠的还是: v-bind:绑定响应式数据,触发 input 事件并传递数据 (核心和重点)
input v-model=“something” 等同于
input :value=“something” @input=“something = $event.target.value”
因此,对于一个带有 v-model 的输入框组件,它应该:接收一个 value prop,触发 input 事件,并传入新值
允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
Vue.component('my-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
// this allows using the `value` prop for a different purpose
value: String,
// use `checked` as the prop which take the place of `value`
checked: {
type: Number,
default: 0
}
},
// ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>
等同于
<my-checkbox
:checked="foo"
@change="val => { foo = val }"
value="some value">
</my-checkbox>
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件:
text 和 textarea 元素使用 value 属性和 input 事件;
checkbox 和 radio 使用 checked 属性和 change 事件;
select 字段将 value 作为 prop 并将 change 作为事件。
10.VUE开发中.sync 修饰符的作用
其实这个修饰符就是vue封装了 子组件要修改父组件传过来的动态值的语法糖,省去了父组件需要写的方法,但是子组件emit时要加上update
// 这里父组件,要给子组件传一个title的值,在子组件内部去修改这个标题
<template>
<div>
<t-title :title.sync="fatherTitle"></t-title>
</div>
</template>
<script>
import tTitle from './list';
export default {
name: 'test1',
components: { tTitle },
data() {
return {
fatherTitle: '父组件给的标题'
};
},}</script>
//子组件
<template>
<div>
<h3>{{ title }}</h3>
<button @click="changeTitle">改变</button>
</div>
</template>
<script>
export default {
props:{
title: {type: String, default: '默认值11'} },
methods: {
changeTitle() {
this.$emit("update:title", "子组件要改自己的标题");
} }};
</script>
11.ref的使用
基本用法,本页面获取dom元素
<template>
<div id="app">
<div ref="testDom">11111</div>
<button @click="getTest">获取test节点</button>
</div>
</template>
<script>
export default {
methods: {
getTest() {
console.log(this.$refs.testDom)
//11111
}
}
};
</script>
拿到子组件中的data和去调用子组件中的方法
//子组件
<template>
<div>
{{ msg }}
</div>
</template>
<script>
export default {
data() {
return {
msg: "hello world"
}
}
}
</script>
//父组件
<template>
<div id="app">
<HelloWorld ref="hello"/>
<button @click="getHello">获取helloworld组件中的值</button>
</div>
</template>
<script>
import HelloWorld from "./HelloWorld.vue";
export default {
components: {
HelloWorld
},
data() {
return {}
},
methods: {
getHello() {
console.log(this.$refs.hello.msg)
}//hello world
}
};
</script>
12.vue-treeselect的使用
选择地点,一次呈树形状铺开,可以多选,可以删除,支持搜索
```javascript
一、首先安装包
npm install --save @riophae/vue-treeselect
"@riophae/vue-treeselect":"^0.0.37",
二、在要用的vue页面上
import Treeselectfrom '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
三、挂组件components: {Treeselect},
四、在需要写的地方引
<treeselect
:multiple="true" //是否可以多选
:options="selectPlace" //提供给用户选择的数据,这是地点选择,这里面的值是调用了一个接口
:flat="true" //后面选中是否前面选中
:sort-value-by="sortValueBy" //这个是排序的作用
:default-expand-level="1"
:normalizer="treeOption" //用于将options的值,转换为符合vue-treeselect要求的数据格式
:searchable="false" //是否启用搜索功能
placeholder="请输入城市名,如杭州市,厦门市" v-model="value"/>
13.slot
slot=“append” 放置后面
el-button slot=“reference”>删除
// reference 触发 Popover 显示的 HTML 元素
14.设置elementUI中el-select的默认值
<el-select v-model="form.card" slot="append">
<el-option v-for="dic in cards" :key="dic.Code" :label="dic.Label" :value="dic.Value"></el-option>
</el-select>
//想让option设置成默认值只需要把form.card的值设置成想要的值就可以
//代码如下
data(){
return{
form:{
card:'shanghai'
}
}
}
15.Vue.config.productionTip = false
阻止显示生产模式的消息
如果没有这行代码,或者设置为true,控制台就会多出这么一段代码。
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
大概意思就是:
你运行的Vu是开发模式。为生产部署时,请确保启用生产模式。
更多推荐
所有评论(0)