vue插件

最新推荐文章于 2024-08-08 20:54:02 发布

BusyMonkey

最新推荐文章于 2024-08-08 20:54:02 发布

阅读量989

点赞数

分类专栏： JavaScript 文章标签： vue

本文链接：https://blog.csdn.net/Dopamy_BusyMonkey/article/details/105507679

版权

JavaScript 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

1、vxe-table

1.1、虚拟滚动

1.2、vxe-table加载element样式

3.1、问题Cannot read property 'getAttribute' of undefined

3.2、折线图

4、移动端框架

4.1、VONIC

1、vxe-table

开发文档：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/scroll/fullRows

1.1、虚拟滚动

20w、冻结列、全选

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>测试HTML</title>
	<link rel="stylesheet" href="https://unpkg.com/vxe-table/lib/index.css">
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
	<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
</head>
<body>
	<div id="app">
		<vxe-table 
			:seq-config="{startIndex: 1000000}"
			border
			resizable
			show-overflow
			show-header-overflow
			highlight-hover-row
			highlight-current-row
			export-config
			ref="xTable"
			height="600"
			:loading="loading"
			:sort-config="{trigger: 'cell'}"
			:checkbox-config="{checkField: 'checked'}">
		  <vxe-table-column type="checkbox" width="60" fixed="left"></vxe-table-column>
		  <vxe-table-column type="seq" title="#" width="100" fixed="left"></vxe-table-column>
		  <vxe-table-column field="id" title="Id" width="100" fixed="left"></vxe-table-column>
		  <vxe-table-column field="name" title="Name" width="100"></vxe-table-column>
		  <vxe-table-column field="sex" title="Sex" width="100"></vxe-table-column>
		  <vxe-table-column field="address" title="Address" width="200"></vxe-table-column>
		  <vxe-table-column field="col1" title="Col1" width="200"></vxe-table-column>
		  <vxe-table-column field="col2" title="Col2" width="200"></vxe-table-column>
		  <vxe-table-column field="col3" title="Col3" width="200"></vxe-table-column>
		  <vxe-table-column field="col4" title="Col4" width="200"></vxe-table-column>
		  <vxe-table-column field="col5" title="Col5" width="200"></vxe-table-column>
		  <vxe-table-column field="col6" title="Col6" width="200"></vxe-table-column>
		  <vxe-table-column field="col7" title="Col7" width="200"></vxe-table-column>
		  <vxe-table-column field="col8" title="Col8" width="200"></vxe-table-column>
		  <vxe-table-column field="col9" title="Col9" width="200"></vxe-table-column>
		  <vxe-table-column field="col10" title="Col10" width="200"></vxe-table-column>
		</vxe-table>
	</div>
</body>
<script>
var tableDataInput = []
for (let i = 1; i <= 200000; i++) {
	let tmp = {id: i,  name: 'Test'+i, role: 'Role'+i, sex: 'Man', address: 'Street'+i, col1: 'col1-'+i, col2: 'col2-'+i, col3: 'col3-'+i, col4: 'col4-'+i, col5: 'col5-'+i, col6: 'col6-'+i, col7: 'col7-'+i, col8: 'col8-'+i, col9: 'col9-'+i, col10: 'col10-'+i} 
	tableDataInput.push(tmp)
}

var vm = new Vue({
	el: "#app",
	data: {
		tableData: tableDataInput,
		loading: false
	},
	methods: {
		loadList () {
			this.loading = true
			// 使用函数式加载，阻断 vue 对大数据的监听
			const xTable = this.$refs.xTable		
			const startTime = Date.now()
			console.log(this.tableData)
			if (xTable) {
				this.$refs.xTable.reloadData(this.tableData).then(() => {
					this.loading = false
				})
			}
		}
	}
})

vm.loadList()
</script>

1.2、vxe-table加载element样式

https://xuliangzhan_admin.gitee.io/vxe-table/#/table/plugin/elementPage

<script src="https://unpkg.com/vxe-table-plugin-element"></script>

<vxe-form :data="formData" @submit="filterAndShowStock">
<vxe-form-item title="代码选择" field="codes" :item-render="{name: 'ElSelect', options: codeList, props: {multiple: true, filterable: true}}">
</vxe-form-item>
</vxe-form>

多选，过滤
其中field="codes"为formData中的域，初始化给null
options: codeList为下拉框中数据

当下拉框数据量较大时候，el下拉框的效率会很低，可以采用remote的方式

<vxe-form-item title="代码选择" field="codes" :item-render="{name: 'ElSelect', options: codeList, props: {multiple: true, filterable: true, remote: true, remoteMethod: remoteMethod, loading: selectLoading, clearable: true}}">

remoteMethod(query) {
    if (query !== '') {
        this.selectLoading = true;
        setTimeout(() => {
            this.selectLoading = false;
            this.codeList = this.codeListRemote.filter(item => {
                return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
            });
        }, 200);
    } else {
        this.codeList = [];
    }
},

其中codeList为当前下拉框展示的结果（搜索时），codeListRemote为远程结果

2、element

开发手册：https://element.eleme.cn/#/zh-CN/component/layout

2.1、分栏

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Element_HTML</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="test.css">
	<script src="https://unpkg.com/vue/dist/vue"></script>
	<script src="https://unpkg.com/element-ui/lib/index"></script>
</head>

<body>
	<div id="app">
		<el-row>
			<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
		</el-row>
		<el-row>
			<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
			<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
		</el-row>
		<el-row>
			<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
			<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
			<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
		</el-row>
		<el-row>
			<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
			<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
		</el-row>
		<el-row>
			<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
			<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
			<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
			<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
			<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
			<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
		</el-row>

	</div>
</body>
<script type="text/javascript">
	new Vue({
		el: '#app',
		data: {}
	})
</script>

.el-row {
	margin-bottom: 20px;
	&:last-child {
		margin-bottom: 0;
	}
}
.el-col {
	border-radius: 4px;
}
.bg-purple-dark {
	background: #99a9bf;
}
.bg-purple {
	background: #d3dce6;
}
.bg-purple-light {
	background: #e5e9f2;
}
.grid-content {
	border-radius: 4px;
	min-height: 36px;
}
.row-bg {
	padding: 10px 0;
	background-color: #f9fafc;
}

2.2、导航

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Element_HTML</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="test.css">
    <script src="https://unpkg.com/vue/dist/vue"></script>
    <script src="https://unpkg.com/element-ui/lib/index"></script>
</head>

<body>
<div id="app">
    <div class="line"></div>
    <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item index="1">首页展示</el-menu-item>
        <el-menu-item index="2">实时数据</el-menu-item>
        <el-menu-item index="3">历史数据</el-menu-item>
        <!--        <el-submenu index="3">-->
        <!--            <template slot="title">工作台</template>-->
        <!--            <el-menu-item index="3-1">选项1</el-menu-item>-->
        <!--            <el-menu-item index="3-2">选项2</el-menu-item>-->
        <!--            <el-menu-item index="3-3">选项3</el-menu-item>-->
        <!--            <el-submenu index="3-4">-->
        <!--                <template slot="title">备用标签</template>-->
        <!--                <el-menu-item index="3-4-1">选项1</el-menu-item>-->
        <!--                <el-menu-item index="34-2">选项2</el-menu-item>-->
        <!--                <el-menu-item index="3-4-3">选项3</el-menu-item>-->
        <!--            </el-submenu>-->
        <!--        </el-submenu>-->
        <!--        <el-menu-item index="4"><a href="https://www.baidu.com" target="_blank">备用链接</a></el-menu-item>-->
    </el-menu>

</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            activeIndex: '1'
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    })
</script>

3、echarts

文档：https://www.echartsjs.com/examples/zh/index.html

阿帕奇echarts官网：https://echarts.apache.org/examples/zh/index.html

3.1、问题Cannot read property 'getAttribute' of undefined

vue 中引用echarts 出现 "TypeError: Cannot read property 'getAttribute' of undefined"问题

dom没加载完成导致，检查一下加载顺序（v-if和v-show加载顺序问题）

3.2、折线图

 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(this.$refs.homePageCharts)
                 指定图表的配置项和数据
                console.log(tableDataInput)
                let dateArr = []
                let closePriceArr = []
                for (let i = 0; i < tableDataInput.length; i++) {
                    if (tableDataInput[i]['closePrice'] == 0.0) {
                        closePriceArr.push(closePriceArr[i - 1])
                    } else {
                        closePriceArr.push(tableDataInput[i]['closePrice'])
                    }
                    dateArr.push(tableDataInput[i]['date'])
                }
                const option = {
                    tooltip: {
                         当trigger为’item’时只会显示该点的数据，为’axis’时显示该列下所有坐标轴所对应的数据。
                        trigger: 'axis',
                         提示框的位置
                        position: function (pt) {
                            return [pt[0], '10%']
                        }
                    },
                    title: {
                        text: '收盘价'
                    },
                    toolbox: {
                         feature 各工具配置项: dataZoom 数据区域缩放;restore 配置项还原;saveAsImage下载为图片;magicType动态类型切换
                        feature: {
                            dataZoom: {
                                 y轴不缩放，Index默认为0
                                yAxisIndex: 'none'
                            },
                            restore: {},
                            saveAsImage: {},
                            magicType: {
                                type: ['bar', 'line']
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: dateArr
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: closePriceArr,
                        type: 'line',
                        smooth: true,  // 开启平滑处理。true的平滑程度相当于0.5
                        // symbol: 'none', // 标记的图形。
                        // sampling: 'average' //  取过滤点的平均值
                    }],
                     内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系
                    dataZoom: [{
                        type: 'inside',
                        start: 0,
                        end: 10
                    }, {
                        start: 0,
                        end: 10,                  // handleIcon 手柄的 icon 形状，支持路径字符串
                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '80%',        //  控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同。
                        handleStyle: {
                            color: 'pink',
                            shadowBlur: 3,      // shadowBlur图片阴影模糊值，shadowColor阴影的颜色
                            shadowColor: 'red',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    }],
                     表格起始位置
                    grid: {
                        show: true,
                        x: 60,
                        y: 60
                    },
                }
                 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option)

<div id="homePage" style="width: auto;height:400px;" v-show="see" ref="homePageCharts">

</div>

4、移动端框架

适配手机端

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

4.1、VONIC

https://github.com/wangdahoo/vonic/tree/master/demo/components

https://wangdahoo.github.io/vonic/docs/#/

https://wangdahoo.github.io/vonic-documents/#/?id=%E4%BB%8B%E7%BB%8D

BusyMonkey

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录