Vux

Vue 引入 Vuex// store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { account: "", password: "", age: 0 }, mutations: { account(state, account) { state.account = account; }, account(state, password) { state.password = password; }, account(state, age) { state.age = age; }, }})export default store挂载至 Vueimport Vue from 'vue'import App from './App'import store from './store'Vue.config.productionTip = falseVue.prototype.$store = storeconst app = new Vue({ store, ...App})app.$mount()页面引用 Vuex使用 mapState, mapMutations 魔术方法导入 ...

VUX的安装使用npm i vux -S安装 vux-loader npm i vux-loader -Dvux是使用的less 安装less npm i less less-loader -D在build/webpack.base.conf.js中 添加配置 const vuxLoader = require('vux-loader') const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] }) originalConfig 就是原本webpack.base.conf.js中 module.exports等号后面的所有内容在goodslist中引入 scroller import { Scroller } from 'vux' export default { components: { Scroller } }在template中添加html代码 <scroller lock-y :scrollbar-x=false> <div class="box1"> <div class="box1-item" v-for="i in 7"><span>{{' ' + i + ' '}}</span></div> </div> </scroller>需要自己去添加浮动 来使标签在一行上显示.box1 { width: 750px; .box1-item { ...

首先我们打开vux的官网查看相关文档传送门：https://doc.vux.li/zh-CN/ 1.根据官网文档进行配置安装VUXnpm install vux --save 2.配置VUX在webpack.base.conf.js最后加入以下代码 // 原来的 module.exports 代码赋值给变量 webpackConfig，//即将原来的module.exports 改为 const originalConfig (请查看前面的配置) const vuxLoader = require('vux-loader')const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui']})3.为了验证是否配置成功，我们在helloword页面输出一下 3.1npm run dev 启动后提示 Error: Cannot find module 'vux-loader'安装 vux-loader npm install vux-loader --save-dev 3.2 再次启动之后，成功显示 3.3 helloword页面代码： <template> <alert v-model="show2" title="测试" :content="'Your Message is sent successfully~'"></alert></template><script>import { Alert } from 'vux'export default { name: 'HelloWorld', components: { Alert }, data () { return { show2: '' } }, created () { this.$vux.alert.show({ title: 'VUX is Cool', content: this.$t('Do you agree?'), onShow () { console.log('Plugin: I\'m showing') }, onHide () { console.log('Plugin: I\'m hiding now') } }) }}</script>4.在src里面新建文件夹views，然后建一个日历文件夹（calendar），在新建index.vue文件将日历的demo代码粘贴上去 ...

先看一下最终的运行效果。项目背景介绍：技术栈： vue+vux+nodejs需求：对汽车品牌列表可以按照字母进行索引定位在开发中实现这种需求，心想还不是小菜一碟，作为一个饱经bug的程序员，别的我就不吹了，最起码Ctrl+C用的还是蛮不错的。虽然我的复制能力MAX，但最起码的功能点还是要先梳理一下。要实现这个功能统共分两步，第一根据点击找到需要定位的位置，第二触发页面滚动直接到这个位置。so easy 嘛我以迅雷不接掩耳盗小铃铛之势就从我的程序小仓库里Ctrl+C了一段代码：如下：document.querySelector(’#id’); // 获取点击节点找到节点对应的内容然后控制滚动$(window).scrollTop($(’#’ + s + ‘1’).offset().top); // 跳转到的位置因为项目中没有用到jQuery，在用的时候要把$去掉。做了点小改动document.documentElement.scrollTop = document.querySelector(’#id’).offset().top);大吉大利，万无一失，程序跑起来。 貌似不行，翻遍全网只要是用scrollTop 都不行。因为在vue中使用scrollTo不能赋值，总是0。在解决程序疑难扎症这一点上，还真没遇到过对手。说了这么多到底怎么做呢？请自行看下面的总结。在试错过程中发现scrollIntoView()方法可以实现定位显示。具体怎么实现的看下面的程序吧，总结一下有三点。1.在需要定位到的dom中创建一个隐藏的dom2.设置要定位的dom元素 position:relative 隐藏的dom position:absolute;3.把点击点定位到隐藏的dom即可嗯，暂时先总结到这里吧，下面有源码可供参考。完美 methods: { jump(index){ document.getElementById(“tchar_nav_"+index).scrollIntoView(); }, }, <!– 字母导航 start –> <div class=“fixed-nav” style=“opacity: 1; display: block;"> <ul class=“rows-box”> <li v-for="(item, index) in listAll” :key=“index” :id="‘char_’+index”> <a @click=“jump(index)">{{index}}</a> </li> </ul> </div> <div class=“alert” style=“display: none;"><span>Y</span></div> <!– 字母导航 end –> <div class=“brand-list bybrand_list” v-for="(item, index) in listAll” :key=“index”> <div :id="’tchar_nav_’+index” class=“positionTo”></div> <div :id="‘char_nav_’+index" class=“tt-small phone-title” :data-key=“index”> <span>{{index}}</span></div> <div class=“box”> <ul> <li id=“char_nav_audi” v-for="(item2, index2) in item" :key=“index2”> </li> </ul> </div> </div><style lang=“less” scoped>.brand-list{ position: relative;}.positionTo{ position: absolute; height: 30px; background: transparent; width: 30px; background: red; z-index: 99; top:-46px;}</sytle>我是李古拉雷，四年java开发，四年前端加产品，现任职今日头条前端架构师，终身学习者。据说热爱开发，热爱分享且颜值高的小伙伴人都关注了这个微信公众号【李古拉雷】 ...

<group title=“请您选择” class=“weui-cell_access”> <popup-picker title="" :data=“channel” v-model=“inChannel” :columns=“1” placeholder=“请选择”></popup-picker> </group>点了很久才让那个样式显示出来，希望你遇到这个问题 能快速的解决 不用傻傻的点 哈哈哈哈做完这个会发现点击有阴影 解决.weui-cell_access:active{ background-color:#fff!important; }