移动端分页列表，在ios上滚动加载分页时候，使用scrollTop，会引起白屏问题。
看不少文章说是使用了-webkit-overflow-scrolling: touch;引起的硬件加速问题。亲测删除问题仍然存在。
|
1 2 3 4 5 |
this.$nextTick(() => { window.scrollTo(0, 1); window.scrollTo(0, 0); }) |
[cr[……]
分类：Vue
Runtime compilation is not supported in this build of Vue. Configure your bundler to alias “vue” to “vue/dist/vue.esm-bundler.js”.
vue3开启eslint报错：ESLint error: Parsing error: ‘＞‘ expected
Uncaught SyntaxError: The requested module ‘/node_modules/.vite/vue-router.js?v=2f0f3daf’ does not provide an export named ‘VueRouter’
vite.config.ts基础配置分享
更多配置参考：https://vitejs.dev
vite.config.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' import { defineConfig } from "vite" const fs = require("fs") const path = require("path") // Dotenv 是一个零依赖的模块，它能将环境变量中的变量从 .env 文件加载到 process.env 中 const dotenv = require("dotenv") const envFiles = [ /** default file */ `.env`, /** mode file */ `.env.${process.env.NODE_ENV}` ] for (const file of envFiles) { const envConfig = dotenv.parse(fs.readFileSync(file)) for (const k in envConfig) { process.env[k] = envConfig[k] } } export default defineConfig({ define: { 'process.env': process.env }, // 开发或生产环境服务的公共基础路径 base: './', // 作为静态资源服务的文件夹 publicDir: 'assets', plugins: [vue(), vueJsx()], resolve: { // 文件系统路径的别名 alias: { '@': path.resolve(__dirname, 'src'), 'vue': 'vue/dist/vue.esm-bundler.js', 'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js' } }, css: { preprocessorOptions: { scss: { additionalData: '@import "./src/assets/style/index.scss";' } } }, build: { // 压缩 minify: process.env.VITE_NODE_ENV === 'production' ? 'esbuild' : false, // 服务端渲染 ssr: false, outDir: 'dist', chunkSizeWarningLimit: 2000, emptyOutDir: true, rollupOptions: { output: { manualChunks(id) { if (id.includes('node_modules')) { return id.toString().split('node_modules/')[1].split('/')[0].toString() } } } } }, server: { host: process.env.VITE_HOST, port: +process.env.VITE_PORT, // 是否自动在浏览器打开 open: false, hmr: true, proxy: { '/api': { target: "http://127.0.0.1:99999", changeOrigin: true } } } }) |
.env
|
1 2 3 4 5 |
# loaded in all cases VITE_HOST = '0.0.0.0' VITE_PORT = 8080 VITE_BASE_URL = './' VITE_OUTPUT_DIR = 'dist' |
&[……]
element-ui 表格控制列显隐简单方案
核心是使用v-if控制列的显隐
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
<template> <div> <div v-for="(item, index) in tables" :key="index"> <el-table :data="item.data" @filter-change="value => filterChange(value,index, 'tables')" :span-method="value => cellMerge(value,'tables')" :header-cell-style="{background:'#fbfbfb'}" size="mini" doLayout border > <el-table-column v-for="(ele,index) in item.columns" :label="ele.text" :prop="ele.value" show-overflow-tooltip v-if="ele.flag" :key="ele.value + index" :resizable="false" > <template slot-scope="scope"> <span>{{scope.row[scope.column.property]}}</span> </template> </el-table-column> <el-table-column :key="item.columns.length + 1" fixed="right" width="50" v-if="item.stash_columns" :filters="item.stash_columns" :filtered-value="item.filter_value" :resizable="false" > <template slot="header" slot-scope="scope"> <i class="el-icon-menu" style="cursor: pointer"></i> </template> </el-table-column> </el-table> </div> </div> </template> <script> export default { data () { return { tables: [ { data: [], columns: [ { text: '滴滴', value: 'didi', flag: true }, { text: '哒哒', value: 'dada', flag: true }, { text: '嘿嘿', value: 'heihei', flag: true }, { text: '哈哈', value: 'haha', flag: false } ] } ] } }, methods: { // 处理数据 handlerData (type) { const data = [{didi: '11', dada: '22', heihei: '33', haha: '44'}] const tables = this[type] tables && tables.length > 0 && tables.map((item, index) => { this.$set(this[type][index], 'data', data) this.$set(this[type][index], 'stash_columns', item.columns) this.$set(this[type][index], 'filter_value', []) const columns = item.stash_columns const filter_value = item.filter_value columns && columns.length > 0 && columns.map((ele, idx) => { if (ele.flag) { filter_value.push(ele.value) } }) this.$set(this[type][index], 'filter_value', filter_value) }) }, // 控制列显隐 filterChange (value, idx, type) { switch (type) { case type: for (const ele in value) { this.$set(this[type][idx], 'show_columns', value[ele]) } const tables = this[type] tables && tables.length > 0 && tables.map((item, index) => { const columns = item.columns const show_columns = item.show_columns if (show_columns && show_columns.length > 0) { columns && columns.length > 0 && columns.map((val, key) => { this.$set(this[type][index].columns[key], 'flag', false) show_columns.map((ele) => { if (val.value === ele) { this.$set(this[type][index].columns[key], 'flag', true) } }) }) } }) break default: break } }, // 合并单元格 cellMerge ({row, column, rowIndex, columnIndex}, type) { this.$nextTick(() => { const tables = this[type] tables && tables.length > 0 && tables.map((item, index) => { const show_columns = item.show_columns const length = show_columns && show_columns.length > 0 ? show_columns.length : item.columns.length if (columnIndex === length - 1) { return [1, 0] } else if (columnIndex === length) { return [0, 0] } }) }) } }, mounted () { this.handlerData('tables') } } </script> |
一个优质的Vue组件库应该遵循什么样的设计原则
Vue项目SEO优化的另一种姿态
在vue中使用import()来代替require.ensure()实现代码打包分离
H5背景音乐自动播放(兼容微信IOS，进程后台切换自动停止播放，本文例子为Vue写法)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<template> <audio src="./static/music.mp3" id="bgMusic" preload="auto" loop></audio> <div class="bgMusicBtn" @click="bgMusicPlayOrPause('bgMusic')"> <img :src="playFlag ? playImg : pauseImg" :class="{rotate: playFlag}"> </div> </template> export default { data() { return { playFlag: true, playImg: require('../../static/play.png'), pauseImg: require('../../static/pause.png'), clickMusicBtn: false } }, mounted() { this.audioAutoPlay('bgMusic'); document.addEventListener("visibilitychange", (e) => { // 兼容ios微信手Q if (this.clickMusicBtn) { // 点击了关闭音乐按钮 if (this.playFlag) { this.audioAutoPlay('bgMusic'); this.playFlag = true; } else { this.audioPause('bgMusic'); this.playFlag = false; } text.innerHTML = e.hidden; if (e.hidden) { // 网页被挂起 this.audioAutoPlay('bgMusic'); this.playFlag = true; } else { // 网页被呼起 this.audioPause('bgMusic'); this.playFlag = false; } } else { // 未点击关闭音乐按钮 if (this.playFlag) { this.audioPause('bgMusic'); this.playFlag = false; } else { this.audioAutoPlay('bgMusic'); this.playFlag = true; } text.innerHTML = e.hidden; if (e.hidden) { // 网页被挂起 this.audioPause('bgMusic'); this.playFlag = false; } else { // 网页被呼起 this.audioAutoPlay('bgMusic'); this.playFlag = true; } } }); }, methods: { bgMusicPlayOrPause(id) { this.clickMusicBtn = !this.clickMusicBtn; if (this.playFlag) { this.audioPause(id); this.playFlag = false; } else { this.audioAutoPlay(id); this.playFlag = true; } }, audioPause(id) { var audio = document.getElementById(id); audio.pause(); document.addEventListener("WeixinJSBridgeReady", function () { audio.pause(); }, false); document.addEventListener('YixinJSBridgeReady', function () { audio.pause(); }, false); }, audioAutoPlay(id) { var audio = document.getElementById(id); audio.play(); document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); }, false); document.addEventListener('YixinJSBridgeReady', function () { audio.play(); }, false); } } } |