【Vue.js】Vue.js组件库Element中的图片、回到顶部、无限滚动和抽屉

1、Image 图片

图片容器，在保留原生img的特性下，支持懒加载，自定义占位、加载失败等。

基础用法

可通过fit确定图片如何适应到容器框，同原生 object-fit。

<div class="demo-image"><div class="block" v-for="fit in fits" :key="fit"><span class="demonstration">{{ fit }}</span><el-imagestyle="width: 100px; height: 100px":src="url":fit="fit"></el-image></div>
</div><script>export default {data() {return {fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'}}}
</script>

占位内容

可通过slot = placeholder可自定义占位内容。

<div class="demo-image__placeholder"><div class="block"><span class="demonstration">默认</span><el-image :src="src"></el-image></div><div class="block"><span class="demonstration">自定义</span><el-image :src="src"><div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div></el-image></div>
</div><script>export default {data() {return {src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'}}}
</script>

加载失败

可通过slot = error可自定义加载失败内容。

<div class="demo-image__error"><div class="block"><span class="demonstration">默认</span><el-image></el-image></div><div class="block"><span class="demonstration">自定义</span><el-image><div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div></el-image></div>
</div>

懒加载

可通过lazy开启懒加载功能，当图片滚动到可视范围内才会加载。可通过scroll-container来设置滚动容器，若未定义，则为最近一个overflow值为auto或scroll的父元素。

<div class="demo-image__lazy"><el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
</div><script>export default {data() {return {urls: ['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg','https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg','https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg','https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg','https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg','https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg','https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg']}}}
</script>

大图预览

可通过 previewSrcList 开启预览大图的功能。

<div class="demo-image__preview"><el-image style="width: 100px; height: 100px":src="url" :preview-src-list="srcList"></el-image>
</div><script>export default {data() {return {url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',srcList: ['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg','https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg']}}}
</script>

Attributes

参数	说明	类型	可选值	默认值
src	图片源，同原生	string	—	-
fit	确定图片如何适应容器框，同原生 object-fit	string	fill / contain / cover / none / scale-down	-
alt	原生 alt	string	-	-
referrer-policy	原生 referrerPolicy	string	-	-
lazy	是否开启懒加载	boolean	—	false
scroll-container	开启懒加载后，监听 scroll 事件的容器	string / HTMLElement	—	最近一个 overflow 值为 auto 或 scroll 的父元素
preview-src-list	开启图片预览功能	Array	—	-
z-index	设置图片预览的 z-index	Number	—	2000

Events

事件名称	说明	回调参数
load	图片加载成功触发	(e: Event)
error	图片加载失败触发	(e: Error)

Slots

名称	说明
placeholder	图片未加载的占位内容
error	加载失败的内容

2、Backtop 回到顶部

返回页面顶部的操作按钮。

基础用法

滑动页面即可看到右下方的按钮。

<template>Scroll down to see the bottom-right button.<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>

自定义显示内容

显示区域被固定为 40px * 40px 的区域, 其中的内容可支持自定义。

<template>Scroll down to see the bottom-right button.<el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100"><divstyle="{height: 100%;width: 100%;background-color: #f2f5f6;box-shadow: 0 0 6px rgba(0,0,0, .12);text-align: center;line-height: 40px;color: #1989fa;}">UP</div></el-backtop>
</template>

Attributes

参数	说明	类型	默认值
target	触发滚动的对象	string
visibility-height	滚动高度达到此参数值才出现	number	200
right	控制其显示位置, 距离页面右边距	number	40
bottom	控制其显示位置, 距离页面底部距离	number	40

Events

事件名	说明	回调参数
click	点击按钮触发的事件	点击事件

3、InfiniteScroll 无限滚动

滚动至底部时，加载更多数据。

基础用法

在要实现滚动加载的列表上上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。

<template><ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto"><li v-for="i in count" class="infinite-list-item">{{ i }}</li></ul>
</template><script>export default {data () {return {count: 0}},methods: {load () {this.count += 2}}}
</script>

禁用加载

<template><div class="infinite-list-wrapper" style="overflow:auto"><ulclass="list"v-infinite-scroll="load"infinite-scroll-disabled="disabled"><li v-for="i in count" class="list-item">{{ i }}</li></ul><p v-if="loading">加载中...</p><p v-if="noMore">没有更多了</p></div>
</template><script>export default {data () {return {count: 10,loading: false}},computed: {noMore () {return this.count >= 20},disabled () {return this.loading || this.noMore}},methods: {load () {this.loading = truesetTimeout(() => {this.count += 2this.loading = false}, 2000)}}}
</script>

Attributes

参数	说明	类型	可选值	默认值
infinite-scroll-disabled	是否禁用	boolean	-	false
infinite-scroll-delay	节流时延，单位为ms	number	-	200
infinite-scroll-distance	触发加载的距离阈值，单位为px	number	-	0
infinite-scroll-immediate	是否立即执行加载方法，以防初始状态下内容无法撑满容器	boolean	-	true

4、Drawer 抽屉

有些时候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验。

基本用法

呼出一个临时的侧边栏, 可以从多个方向呼出。

需要设置 visible 属性，它的类型是 boolean，当为 true 时显示 Drawer。Drawer 分为两个部分：title 和 body，title 需要具名为 title 的 slot，也可以通过 title 属性来定义，默认值为空。需要注意的是，Drawer 默认是从右往左打开，当然可以设置对应的 direction，详细请参考 direction 用法。最后，本例还展示了 before-close 的用法。

<el-radio-group v-model="direction"><el-radio label="ltr">从左往右开</el-radio><el-radio label="rtl">从右往左开</el-radio><el-radio label="ttb">从上往下开</el-radio><el-radio label="btt">从下往上开</el-radio>
</el-radio-group><el-button @click="drawer = true" type="primary" style="margin-left: 16px;">点我打开
</el-button><el-drawertitle="我是标题":visible.sync="drawer":direction="direction":before-close="handleClose"><span>我来啦!</span>
</el-drawer><script>export default {data() {return {drawer: false,direction: 'rtl',};},methods: {handleClose(done) {this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});}}};
</script>

不添加 Title

当你不需要标题的时候, 你还可以去掉标题。

当遇到不需要 title 的场景时, 可以通过 withHeader 这个属性来关闭掉 title 的显示, 这样可以留出更大的空间给到用户, 为了用户的可访问性, 请务必设定 title 的值。

<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">点我打开
</el-button><el-drawertitle="我是标题":visible.sync="drawer":with-header="false"><span>我来啦!</span>
</el-drawer><script>export default {data() {return {drawer: false,};}};
</script>

自定义内容

和 Dialog 组件一样, Drawer 同样可以在其内部嵌套各种丰富的操作。

<el-button type="text" @click="table = true">打开嵌套表格的 Drawer</el-button>
<el-button type="text" @click="dialog = true">打开嵌套 Form 的 Drawer</el-button>
<el-drawertitle="我嵌套了表格!":visible.sync="table"direction="rtl"size="50%"><el-table :data="gridData"><el-table-column property="date" label="日期" width="150"></el-table-column><el-table-column property="name" label="姓名" width="200"></el-table-column><el-table-column property="address" label="地址"></el-table-column></el-table>
</el-drawer><el-drawertitle="我嵌套了 Form !":before-close="handleClose":visible.sync="dialog"direction="ltr"custom-class="demo-drawer"ref="drawer"><div class="demo-drawer__content"><el-form :model="form"><el-form-item label="活动名称" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><el-form-item label="活动区域" :label-width="formLabelWidth"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item></el-form><div class="demo-drawer__footer"><el-button @click="cancelForm">取 消</el-button><el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button></div></div>
</el-drawer><script>
export default {data() {return {table: false,dialog: false,loading: false,gridData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}],form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},formLabelWidth: '80px',timer: null,};},methods: {handleClose(done) {if (this.loading) {return;}this.$confirm('确定要提交表单吗？').then(_ => {this.loading = true;this.timer = setTimeout(() => {done();// 动画关闭需要一定的时间setTimeout(() => {this.loading = false;}, 400);}, 2000);}).catch(_ => {});},cancelForm() {this.loading = false;this.dialog = false;clearTimeout(this.timer);}}
}
</script>

多层嵌套

Drawer 组件也拥有多层嵌套的方法。

同样，如果你需要嵌套多层 Drawer，请一定要设置 append-to-body 属性为 true。

<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">点我打开
</el-button><el-drawertitle="我是外面的 Drawer":visible.sync="drawer"size="50%"><div><el-button @click="innerDrawer = true">打开里面的!</el-button><el-drawertitle="我是里面的":append-to-body="true":before-close="handleClose":visible.sync="innerDrawer"><p>_(:зゝ∠)_</p></el-drawer></div>
</el-drawer><script>export default {data() {return {drawer: false,innerDrawer: false,};},methods: {handleClose(done) {this.$confirm('还有未保存的工作哦确定关闭吗？').then(_ => {done();}).catch(_ => {});}}};
</script>

Drawer 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。

Drawer 提供一个 destroyOnClose API, 用来在关闭 Drawer 时销毁子组件内容, 例如清理表单内的状态, 在必要时可以将该属性设置为 true 用来保证初始状态的一致性

如果 visible 属性绑定的变量位于 Vuex 的 store 内，那么 .sync 不会正常工作。此时需要去除 .sync 修饰符，同时监听 Drawer 的 open 和 close 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 visible 属性绑定的变量的值。

Drawer Attributes

参数	说明	类型	可选值	默认值
append-to-body	Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true	boolean	—	false
before-close	关闭前的回调，会暂停 Drawer 的关闭	function(done)，done 用于关闭 Drawer	—	—
close-on-press-escape	是否可以通过按下 ESC 关闭 Drawer	boolean	—	true
custom-class	Drawer 的自定义类名	string	—	—
destroy-on-close	控制是否在关闭 Drawer 之后将子元素全部销毁	boolean	-	false
modal	是否需要遮罩层	boolean	—	true
modal-append-to-body	遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Drawer 的父元素上	boolean	—	true
direction	Drawer 打开的方向	Direction	rtl / ltr / ttb / btt	rtl
show-close	是否显示关闭按钮	boolean	—	true
size	Drawer 窗体的大小, 当使用 number 类型时, 以像素为单位, 当使用 string 类型时, 请传入 ‘x%’, 否则便会以 number 类型解释	number / string	-	‘30%’
title	Drawer 的标题，也可通过具名 slot （见下表）传入	string	—	—
visible	是否显示 Drawer，支持 .sync 修饰符	boolean	—	false
wrapperClosable	点击遮罩层是否可以关闭 Drawer	boolean	-	true
withHeader	控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效	boolean	-	true

Drawer Slot

name	说明
—	Drawer 的内容
title	Drawer 标题区的内容

Drawer Methods

name	说明
closeDrawer	用于关闭 Drawer, 该方法会调用传入的 before-close 方法

Drawer Events

事件名称	说明	回调参数
open	Drawer 打开的回调	—
opened	Drawer 打开动画结束时的回调	—
close	Drawer 关闭的回调	—
closed	Drawer 关闭动画结束时的回调	—

【Vue.js】Vue.js组件库Element中的图片、回到顶部、无限滚动和抽屉相关推荐

【Vue.js】Vue.js组件库Element中的单选框、多选框、输入框和计数器
1.Radio 单选框基础用法由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器. 要使用 Radio 组件,只需要设置v-model绑定变量,选中意味着变量的值为相应 Rad ...
vue手机端项目php,MintUI基于Vue.js移动端组件库详解
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧,希望能帮助到大家. 官网 ...
vue tree组件_基于 Vue2.0 和 HeyUI 组件库的中后端系统 HeyUI Admin
介绍 heyui-admin 是一个成熟的企业应用解决方案,基于 vue2.0 和 heyui 组件库的中后端系统. 功能 - Js - common / 通用 - ajax / 封装axios - ...
5 款最棒的 Vue 移动端 UI 组件库 - 特别针对国内使用场景推荐
本文完整版:<最棒的 Vue 移动端 UI 组件库 - 特别针对国内使用场景推荐> Vue 移动端 UI 组件库推荐 Vant 3 - 有赞移动 UI 组件库,支持 Vue 3 微信小程序 ...
Vue2基础、组件化编程、脚手架、Vuex、Vue路由、UI组件库
尚硅谷张天禹老师讲课学习视频 1.Vue简介 Vue2中文官网 1.1 Vue 介绍一套用于构建用户界面的渐进式JavaScript框架构建用户界面:把数据通过某种办法变成用户界面渐进式:可以 ...
vue自定义插件封装一个类似 element 中 message 消息提示框的插件
vue自定义插件封装一个类似 element 中 message 消息提示框的插件一.资源文档 1.vue内置组件 transition 2.Vue.use() 3.Vue.extend() 4. ...
Vue移动端UI组件库
1. vonic vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约. 中文文档 | github地址 | 在线预览 image 2. vux ...
Vue 移动端UI组件库
1. vonic vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约. 文档 | github地址 | 在线预览 2. vux vux 基于We ...
基于 next.js + mdx 搭建组件库文档项目(二) -- mdx 控件封装实现组件的演示与 Props 列表
说明经过上阶段的配置虽然可以在项目中使用 mdx 语法来创建页面了,但是我们的组件库有一些定制化的需求:交互式的组件演示.组件 Props 列表展示.这些功能如果可以通过封装来实现,会大大提升开发 ...

【Vue.js】Vue.js组件库Element中的图片、回到顶部、无限滚动和抽屉

1、Image 图片

基础用法

占位内容

加载失败

懒加载

大图预览

Attributes

Events

Slots

2、Backtop 回到顶部

基础用法

自定义显示内容

Attributes

Events

3、InfiniteScroll 无限滚动

基础用法

禁用加载

Attributes

4、Drawer 抽屉

基本用法

不添加 Title

自定义内容

多层嵌套

Drawer Attributes

Drawer Slot

Drawer Methods

Drawer Events

【Vue.js】Vue.js组件库Element中的图片、回到顶部、无限滚动和抽屉相关推荐

最新文章

热门文章