问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
onSubmit () {
console.log(this.$vux)
this.$refs.search.setBlur()
this.$vux.toast.show({
type: 'text',
position: 'top',
text: 'on submit'
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
// 这个值打印出来不出意外是undefined
console.log(this.$vux)
// 那么这个值呢？ 考虑过this指向了什么没有
console.log(this)
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
检查vux是否正确安装，然后看下你是否引入了toast组件。另外还支持插件方式引入,具体查看
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
文档中有如下一句话
你需要通过 plugin 的形式调用
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：23844人阅读
简单平分：水平布局和垂直布局
&Horizontal&
style="height:40"&
& class="flex-demo"&1&&
& class="flex-demo"&2&&
& class="flex-demo"&3&&
&Vertical&
orient="vertical" :margin-left=0&
& class="flex-demo" style="margin-left:0"&1&&
& class="flex-demo" style="margin-left:0"&2&&
& class="flex-demo" style="margin-left:0"&3&&
import {Divider,FlexboxItem,Flexbox} from 'vux/src/components'
export default {
components: {
Divider,FlexboxItem,Flexbox
.flex-demo {
text-align: center;
color: #EEE;
background-color: #0077FF;
margin-bottom: 16px;
border-radius: 6px;
-webkit-background-clip: padding-box;
:margin-left=0 style="height: 200 background-color: #" class="vux-1px-tb vux-1px-l vux-1px-r"&
class="vux-1px-r" style="height:200"&&
orient="vertical" :margin-left=0&
class="vux-1px-b"&&
style="height: 100"&
:margin-left=0&
class="vux-1px-r"&&
scrollbarX
横向滚动条
scrollbarY
垂直方向滚动条
是否有边缘回弹
use-pulldown
是否使用下拉组件
use-pullup
是否使用上拉组件
pulldown-config
下拉组件配置
pullup-config
上拉组件配置
pulldown-status
双向绑定，当需要自定义下拉刷新行为时配置
pullup-status
双向绑定，当需要自定义上拉行为时配置
reset方法，重新渲染，因为scroller并不知道内部内容是否变化，因此需要手动取得ref进行reset, 并且需要在$nextTick中执行。
this.$nextTick(() =& {
this.$refs.scroller.reset()
scroller的uuid
pullup:loading
上拉加载时触发的事件，需要在获取数据后使用$broadcast触发状态更新，
this.$broadcast(‘pullup:reset’, uuid)
pulldown:loading
下拉加载时触发的事件，需要在获取数据后使用$broadcast触发状态更新，
this.$broadcast(‘pulldown:reset’, uuid)
pullup:disable
禁用上拉加载，当没有更多数据需要禁用时使用$broadcast触发禁用，
this.$broadcast(‘pullup:disable’, uuid)
pullup:enable
启用上拉加载，禁用插件后，当又重新需要时使用$broadcast触发重新启用，
this.$broadcast(‘pullup:enable’, uuid)
默认slot根元素必须有且只有一个, 如content
可以取消切换动画
active-color=”#fc378c”可以设置切换的颜色
:selected="demo1 === '已发货'" @click="demo1 = '已发货'"&已发货&
:selected="demo1 === '未发货'" @click="demo1 = '未发货'"&未发货&
:selected="demo1 === '全部订单'" @click="demo1 = '全部订单'"&全部订单&
:selected="demo1 === '1'" @click="demo1" = '6666'&6666&
import {Tab, TabItem} from 'vux/src/components'
export default {
components: {
Tab, TabItem
demo1: '1'
.flex-demo {
text-align: center;
color: #fff;
background-color: #0077FF;
margin-bottom: 8px;
border-radius: 4px;
-webkit-background-clip: padding-box;
更简洁的粟子
&tab :line-width="2" active-color="#fc378c"&
&tab-item :selected="demo2 === item" v-for="item in list2" @click="demo2 = item"&&/tab-item&
export default {
demo2: '美食',
list2: ['精选', '美食', '电影', '酒店', '外卖']
Popup弹出层
Popup，需要双向绑定 Boolean
弹出层高度
String auto
如果希望弹出层铺满整个屏幕，则可设置height=100%
on-first-show
第一次出现时，用于需要在第一次进行异步数据获取或者必要的UI渲染（如Popup内有Scroller）
title="WIFI" :value.sync="show"&&
title="Full popup" :value.sync="show1"&&
:show.sync="show"&
class="popup0"&
title="Another Switcher" :value.sync="show"&&
:show.sync="show1" height="80%"&
class="popup1"&
title="Another Switcher" :value.sync="show1"&&
} from 'vux/src/components'
export default {
components:{
Group,Switch,Popup
show: false,
show1: false
padding-bottom:15px;
height:200px;
width:100%;
height:100%;
Sticky 自动固定在顶部
v-for="i in 5"&
:line-width=1&
selected&正在正映&
&即将上映&
v-for="i in 50"&
} from 'vux/src/components'
export default {
components:{
Tab,Sticky,TabItem
show: false,
show1: false
顶部滚动广告
lock-x scrollbar-y use-pulldown @pulldown:loading="load" enable-horizontal-swiping&
class="box2"&
:list="list" direction="horizontal" auto :min-moving-distance="20" height="180px"&&
import { Scroller, Swiper } from 'vux/src/components'
export default {
components: {
methods: {
load (uuid) {
const _this = this
setTimeout(function () {
_this.$broadcast('pulldown:reset', uuid)
url: 'http://mp./s?__biz=MzAxNjU0MDYxMg==&ampmid=&ampidx=1&ampsn=78f6b8dbdcc59&ampscene=19#wechat_redirect',
img: '2.z0./1.jpg',
title: '如何手制一份秋意的茶？'
url: 'http://mp./s?__biz=MzAxNjU0MDYxMg==&ampmid=&ampidx=1&ampsn=29ef02aff6aec92bfb46c1&ampscene=19#wechat_redirect',
img: '2.z0./2.jpg',
title: '茶包VS原叶茶'
url: 'http://mp./s?__biz=MzAxNjU0MDYxMg==&ampmid=&ampidx=1&ampsn=2b2108784fccc254d28c&ampscene=19#wechat_redirect',
img: '2.z0./3.jpg',
title: '播下茶籽，明春可发芽？'
&template&
&group title="default format: YYYY-MM-DD"&
&datetime :value.sync="value1" @on-change="change" title="Birthday"&&/datetime&
&group title="YYYY-MM-DD HH:mm"&
&datetime :value.sync="value2" format="YYYY-MM-DD HH:mm" @on-change="change" title="start time" inline-desc="select hour and minute"&&/datetime&
&group title="Placeholder"&
&datetime :value.sync="value3" format="YYYY-MM-DD" placeholder="Please select" @on-change="change" title="start time"&&/datetime&
&group title="specified min-year and max-year"&
&datetime :value.sync="value4" placeholder="Please select" :min-year=2000 :max-year=2016 format="YYYY-MM-DD HH:mm" @on-change="change" title="years after 2000"&&/datetime&
&group title="specified template text in Chinese"&
&datetime :value.sync="value5" placeholder="请选择日期" :min-year=2000 :max-year=2016 format="YYYY-MM-DD HH:mm" @on-change="change" title="Chinese" year-row="{value}年" month-row="{value}月" day-row="{value}日" hour-row="{value}点" minute-row="{value}分" confirm-text="完成" cancel-text="取消"&&/datetime&
&/template&
import { Datetime, Group } from 'vux/src/components'
export default {
components: {
value1: '',
value2: '',
value3: '',
value4: '',
value5: ''
methods: {
change (value) {
console.log('change', value)
title="Default"&
title="message" placeholder="I'm placeholder"&&
title="不显示清除按钮"&
title="message" placeholder="I'm placeholder" :show-clear="false" autocapitalize="characters"&&
title="set is-type=china-name"&
title="姓名" name="username" placeholder="请输入姓名" is-type="china-name"&&
title="set keyboard=number and is-type=china-mobile"&
title="手机号码" name="mobile" placeholder="请输入手机号码" keyboard="number" is-type="china-mobile"&&
title="set is-type=email"&
title="邮箱" name="email" placeholder="请输入邮箱地址" is-type="email"&&
title="set min=2 and max=5"&
title="2-5个字符" placeholder="" :min="2" :max="5"&&
title="确认输入"&
title="请输入6位数字" type="text" placeholder="" :value.sync="password" :min="6" :max="6" @on-change="change"&&
title="请确认6位数字" type="text" placeholder="" :equal-with="password"&&
title="验证码" class="weui_cells_form"&
title="验证码" class="weui_vcode"&
slot="right" src="http://weui.github.io/weui/images/vcode.jpg"&
title="发送验证码" class="weui_vcode"&
slot="right" type="primary"&发送验证码&
title="check if value is valid when required===true"&
title="message" placeholder="I'm placeholder" v-ref:input&&
title="get valid value" :value="'$valid value:' + $refs.input.valid"&&
title="check if value is valid when required===false"&
title="message" placeholder="I'm placeholder" :required="false" v-ref:input02&&
title="get valid value" :value="'$valid value:' + $refs.input02.valid"&&
import { XInput, Group, XButton, Cell } from 'vux/src/components'
export default {
components: {
password: '123465'
methods: {
change (val) {
console.log(val)
.weui_cell_ft .weui_btn {
margin-left: 5px;
vertical-align: middle;
display: inline-block;
单个计数器
&template&
&group title="Default"&
&x-number name="number" title="Number"&&/x-number&
&group title="listen to change events"&
&x-number name="listen" title="Number" :value="0" :min="0" @on-change="change"&&/x-number&
&group title="set width=100"&
&x-number title="Number" :width="100"&&/x-number&
&group title="set step=0.5"&
&x-number title="Number" :step="0.5"&&/x-number&
&group title="set value=1, min=-5 and max=8"&
&x-number title="Number" :min="-5" :max="8" :value="1"&&/x-number&
&group title="fillable = false"&
&x-number :value="10" title="Number" :fillable="false"&&/x-number&
&group title="with other element"&
&x-number title="Number" :min="-5" :max="8" :value="1" type="inline"&&/x-number&
&x-number title="Number" :min="-5" :max="8" :value="1" type="inline"&&/x-number&
&switch title="Other element" :value.sync="true"&&/switch&
&/template&
import { Group, XNumber, Switch } from 'vux/src/components'
export default {
components: {
methods: {
change (val) {
console.log('change', val)
图文组合列表
title="switch the type"&
title="type" :value.sync="type" :options="['1', '2', '3']"&&
header="图文组合列表" :footer="footer" :list="list" :type="type"&&
import { Panel, Group, Radio } from 'vux/src/components'
export default {
components: {
type: '1',
src: '/60x60/3cc51f/ffffff',
title: '标题一',
desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
url: '/component/cell'
src: '/60x60/3cc51f/ffffff',
title: '标题二',
desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
path: '/component/radio',
replace: false
title: '查看更多',
url: 'http://vux.li'
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：122109次
积分：1572
积分：1572
排名：千里之外
原创：60篇
转载：19篇
评论：14条
(1)(1)(1)(7)(4)(6)(1)(6)(19)(5)(5)(10)(4)(1)(8)问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
&div style="padding: 15"&
&x-button @click.native="showLoading" type="primary"&显示loading(2s后关闭)&/x-button&
showLoading () {
this.$vux.loading.show({
text: 'Loading'
setTimeout(() =& {
this.$vux.loading.hide()
提示报错：Uncaught TypeError: Cannot read property 'loading' of undefined
老铁们，帮忙看看&_&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
this的指向问题
setTimeout(() =& {
this.$vux.loading.hide()//this指向
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
{ LoadingPlugin } from 'vux'
Vue.use(LoadingPlugin)
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：问题： (javascript)在vue-cli引入vux后
描述:build/webpack.base.conf.js代码如下var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
var vuxLoader = require('vux-loader')
function resolve (dir) {
return path.join(__dirname, '..', dir)
const originalConfig = {
app: './src/main.js'
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
resolve: {
extensions: ['.js', '.vue', '.json'],
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
引入组件的页面 components/vuxc
上一篇： 下一篇："用 vue 开发项目中，因为主要是用在手机端，所以我选择使用了封装好 weui 的 vux。 遇到的问题： 底部的菜单栏对于比较简短的页面来说，位于页面的底部，但是对于页面比较长的，菜单栏就跟着移动了。。。 [图片] [图片] 这个菜单栏我写的 App.vue 中，部分代码：
src 加 ...."
vux 遇到的两个问题
用 vue 开发项目中，因为主要是用在手机端，所以我选择使用了封装好 weui 的 vux。
遇到的问题：
底部的菜单栏对于比较简短的页面来说，位于页面的底部，但是对于页面比较长的，菜单栏就跟着移动了。。。
这个菜单栏我写的 App.vue 中，部分代码：
&template&
&router-view&&/router-view&
&game-tabbar&&/game-tabbar&
&/template&
src 加载图片不成功，查看 network 反而多了一个 rlog.php?...... 的请求
这边的空白部分，其实应该是显示图片的。
&flexbox-item&
src="../../assets/temp/2.png"
class="ximg-demo"
error-class="ximg-error"
container="#ways-box"&&/x-img&
&/flexbox-item&
&/flexbox&
Request URL:
/rlog.php?_npid=deskdict&_ncat=event&_ncoo=.4335086&_nssn=NULL&_nver=1.2.0&_ntms=8&_nhrf=first-touch&/game/player=NULL&keyfrom=dict_huaci
图片的地址是没有问题的，因为不动代码的情况下偶尔刷新能显示出图片，偶尔又是空白，主要是这个请求有点莫名其妙，不知道哪里来的。
遇到 bug 还算正常，只要搜索一下，解决了就好，但是，这两个问题都不知道搜索什么关键字。求助各位。
哦对，D，为啥我在 vscode 中复制过来的代码代这个编辑器中，标签的闭合部分会丢了一半？空格问题么？
助力小程序快速上线
Promoted by
Feel easy about trust.
Powered by
2.1.0 o 68ms