🍀 FourLeaf
Switch language
zh
Switch theme
Light

  • Jquery Fill Vue Input

    想要使用 Jquery 写油猴脚本自动填充网页中的 input 框时, 使用 jquery 操作如下 <form> <input type="text" name="username"> <input type="password" name="password"> </form> $('input:eq(0)').val('myname') // eq 用于特定第几个 input $('input:eq(1)').val('mypassword') 但如果目标网页是由 Vue(React) 编写的, 那么此种方法并不能改变框架内的 v-model 的值, 原因是 Vue 监听的是 input 元素的 input 事件, 而直接使用 jquery(vanilla js) 修改 input 元素的值并不会触发 input 事件, 解决办法是修改值后, 手动触发 input 事件 $('input:eq(0)')[0].dispatchEvent(new Event('input'), {bubbles: true})

  • vue-nuxt-中-通过路由来实现导航高亮

    首先在 mounted() 中判断了路由, 实现高亮, 后来发现刷新才有用, 直接 router.push 过去的链接则不生效 监听路由变化, 执行同样的判断 mounted() { this.initHighlight() }, watch: { "$route"() { this.initHighlight() } }, methods: { // 导航高亮 initHighlight() { if (this.$route.name == 'route1') { this.active_id = -2 } else if (this.$route.name == 'route2) { this.active_id = -1 } else if (this.$route.name == 'route3') { this.active_id = this.$route.params.navid } else { this.active_id = 0 } } } 参考自: segmentfault

  • vue-cli3-0-项目-全局-styl-样式在-App-vue-引入后变量不生效

    错误情况 在 assets 下新建 common.styl 样式, 在 App.vue 的 style 标签引入后. 在没有变量的情况下可以全局使用, 有变量时, 则变量不生效 解决办法 不需要在 App.vue 中引用 在 vue.config.js 中引用 module.exports = { css: { loaderOptions: { stylus: { 'resolve url': true, 'import': [ './src/theme', './src/assets/css/public/common' ] } } } }

  • vue-awesome-swiper-响应式

    使用 vue-awesome-swiper 版本为 3.1.4 (对应的 swiper 版本为 swiper4) // 先用原生 js + swiper4 写了一个响应式 demo.html, 每次 resize 重新 new 一个 swiper <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script> <style> .swiper-container { position: relative; margin: 0 auto; } .swiper-slide { background-color: #eee; text-align: center; } .avatar { width: 120px; border-radius: 50%; /*margin: 0 auto;*/ } p.

  • element-ui-一系列-then,-catch-事件转成-async-await

    // message box async open() { const res = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示').catch(_ => { console.log('已取消, 结束') }) if (res !== 'confirm') { return } console.log(res, "已确认, 可以next") } 原文参见 csdn

  • nuxt-部署并使用-nginx-作端口转发

    代码上传 linux 服务器后, 注意 windows 下开发的 node-sass 包需要重新安装(npm rebuild node-sass), 打包 nuxt 项目 npm run build pm2 启动 nuxt start, 在项目根目录下 pm2 start node_modules/nuxt/bin/nuxt.js -- start 配置 nginx 文件 // 最简配置 server { listen 80; server_name www.nuxt-project.com; location / { proxy_pass http://127.0.0.1:3000; } } 部署时遇到一个问题, nuxt 代码里的 api 请求地址是本地的, 放到服务器也没改, 造成会返 500 部署也可参照 nuxt 官方部署文档

  • element-ui-响应式布局-span-不能为0

    <el-col :md="{span:8}" :sm="{span:0}" :xs="{span:0}"> .... </el-col > 会导致样式混乱, 达不到想要的隐藏效果, 可以用 .hidden-sm-and-down 类来实现

  • nuxt-asyncData-多个接口异步

    接口同步, 耗时长 async asyncData({$axios}){ let res1 = await $axios.get('...') let res2 = await $axios.get('...') return { res1: res1, res2: res2 } } 接口异步 async asyncData({$axios}){ let [res1, res2] = await Promise.all([ $axios.get('...'), $axios.get('...') ]} return { res1: res1, res2: res2 }

  • nuxt-服务端操作-cookie

    cookie-universal-nuxt, 见 npm You can use cookie-universal-nuxt to set, get and remove cookies in both client and server side nuxt apps

  • element-ui-carousel-响应式(自适应)

    <template> <div> <!-- banner --> <el-carousel trigger="click" :height="bannerHeight + 'px'"> <el-carousel-item v-for="item in banners" :key="item.id"> <img :src="$store.state.back_url + item.image" alt="banner" ref="bannerHeight" width="100%" @load="imgLoad" > </el-carousel-item> </el-carousel> </div> </template> <script> export default { async asyncData({params, $axios}) { const response = await $axios.get('/phpapi/home-banners') return {banners: response.data.data} }, data() { return { bannerHeight: '', } }, methods: { imgLoad() { this.$nextTick(() => { this.bannerHeight = this.$refs.bannerHeight[0].height }) } }, mounted() { this.imgLoad() window.addEventListener('resize', () => { this.
🍀