yunfeihuang/vx-ui

vue components 移动端UI组件库

vx-ui

vue3.x 移动端UI组件库

中文文档：

http://vx.bittyos.com/v3/

示例浏览地址：

http://vx.bittyos.com/v3/demo.html

安装

npm install vx-ui --save-dev

全局注册组件

import {createApp} from 'vue'
import App from './App'
import 'vx-ui/lib/style/theme/index.css'
import Vx from 'vx-ui'
createApp(App).use(Vx)

单个注册组件(Button示例)

import Vue from 'vue'
import App from './App'
import 'vx-ui/lib/style/theme/button.css'
import { Button } from 'vx-ui' // or import Button from 'vx-ui/lib/button'
createApp(App).component(Button.name, Button)

修改UI主题风格

#修改packages/style/src/variable.scss变量后运行以下命令即可
npm run build:theme

vx-ui vue2.x版本的

https://github.com/yunfeihuang/vx-ui/tree/master

打赏赞助，请扫以下二维码，谢谢！

Customize configuration

See Configuration Reference.

vx-ui's Issues

xTextarea的一个问题

http://assets.bittyos.com/vue-components/#/textarea

这里的样式

&textarea-shadow{
      position:absolute;
      left:0;
      top:0;
      min-height:2.6rem;
      word-break: break-all;
      opacity:0;
      z-index: -1
}

不应该加的 word-break: break-all; 的，不然在 textarea 里面 和 v-textarea-shadow 里面，内容排版可能存在不一致，最后高度肯定也不一致， textarea 的展示会出现问题

提个建议

我看到Ripple波纹效果很不错，如果能在button上加上这个:ripple="true",也能实现这个效果就很不错了。

ui引入报错

我想使用你的timerange组件，怎么把它放到我自己的项目中，我尝试把你的代码copy到我的项目，报错：缺少模块

启动报错，帮忙看下，谢谢

These dependencies were not found:

• babel-runtime/core-js/array/from in ./node_modules/vx-ui/lib/index.js
• babel-runtime/core-js/get-iterator in ./node_modules/vx-ui/lib/index.js
• babel-runtime/core-js/json/stringify in ./node_modules/vx-ui/lib/index.js
• babel-runtime/core-js/object/assign in ./node_modules/vx-ui/lib/index.js
• babel-runtime/core-js/promise in ./node_modules/vx-ui/lib/index.js
• babel-runtime/helpers/extends in ./node_modules/vx-ui/lib/index.js
• babel-runtime/helpers/toConsumableArray in ./node_modules/vx-ui/lib/index.js
• element-ui/lib/form in ./node_modules/vx-ui/lib/index.js
• element-ui/lib/form-item in ./node_modules/vx-ui/lib/index.js

To install them, you can run: npm install --save babel-runtime/core-js/array/from babel-runtime/core-js/get-iterator babel-runtime/core-js/json/stringify bab
el-runtime/core-js/object/assign babel-runtime/core-js/promise babel-runtime/helpers/extends babel-runtime/helpers/toConsumableArray element-ui/lib/form elem
ent-ui/lib/form-item

打开弹出层能否不变动地址栏

打开弹出层时地址栏会添加如‘?popup=q319i3zhr8f’这样的字段，能否去除掉？

请问脚手架4以后的怎么引入啊，老是报错

a

lib下面是通过打包生产的，请问打包的webpack配置能公布一下吗？

作者很厉害啊~这个组件库我感觉比其他的还全一些

支持一下飞哥

下个项目就用飞哥这个UI组件，毕竟有啥问题，直接当面解决。

作者进来看下，运行出错。

1、按照文档操作，
npm install vx-ui --save-dev
2、然后再main.js上引入
import 'vx-ui/lib/style/theme/index.css'
import VxUI from 'vx-ui'
Vue.use(VxUI)
3、运行项目出错
4、出错代码
ERROR Failed to compile with 7 errors 16:32:58
These dependencies were not found:

• photoswipe/dist/default-skin/default-skin.css in ./node_modules/vx-ui/lib/index.js
• photoswipe/dist/photoswipe-ui-default in ./node_modules/vx-ui/lib/index.js
• photoswipe/dist/photoswipe.css in ./node_modules/vx-ui/lib/index.js
• photoswipe/dist/photoswipe.min.js in ./node_modules/vx-ui/lib/index.js
• qrcodejs2 in ./node_modules/vx-ui/lib/index.js
• swiper/dist/css/swiper.min.css in ./node_modules/vx-ui/lib/index.js
• swiper/dist/js/swiper.min.js in ./node_modules/vx-ui/lib/index.js

To install them, you can run: npm install --save photoswipe/dist/default-skin/default-skin.css photoswipe/dist/photoswipe-ui-default photoswipe/dist/photoswipe.css photoswipe/dist/photoswipe.min.js qrcodejs2
swiper/dist/css/swiper.min.css swiper/dist/js/swiper.min.js
![1]

npm install报错

亲，我想把你的组件放在我的项目中使用，请问怎么引入以及使用呢，能不能有一个文档呢

哥们，你的new Vue动态创建的组件，为什么在2.0会爆粗，编译不过！！！

递归组件调用，name参数问题

我希望

流畅的使用这个Layout 布局

实际情况

在我全局引入 注册组件之后，总是在使用了 这个组件的页面中会在控制台 有报错提示。

报错信息如下 ：

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> at src/components/get-drive/detail.vue
at src/App.vue

我的代码

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
// import uni from './util/uni.webview.0.1.52'

var uni =require('./util/uni.webview.0.1.52')

console.log(uni)
import 'vx-ui/lib/style/theme/index.css'
import VxUI from 'vx-ui'
 Vue.use(VxUI)

Vue.config.productionTip = false

Vue.prototype.$uni=uni.uni
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

报错的组件

<template>
 <layout>
   <div slot="header">
     <x-nav :isBack="false" :title="nav_title">
       <button class="btn-pull" slot="pull">我的</button>
     </x-nav>
   </div>
   <x-body slot="body" style="padding: 0 0.3rem;" name="">
     <group title="租赁业务">
       <div class="custom-business-list">
         <router-link class="business-list-item" to="get-drive">
           <div>取设备</div>
         </router-link>
         <router-link class="business-list-item" to>
           <div>还设备</div>
         </router-link>
         <router-link class="business-list-item" to>
           <div>查订单</div>
         </router-link>
         <router-link class="business-list-item" to>
           <div>管库存</div>
         </router-link>
       </div>
     </group>
     <group title="零售业务">
       <div class="custom-business-list">
         <router-link class="business-list-item" to>
           <div>客户自提</div>
         </router-link>
         <router-link class="business-list-item" to>
           <div>查订单</div>
         </router-link>
         <router-link class="business-list-item" to>
           <div>管库存</div>
         </router-link>
       </div>
     </group>
   </x-body>
 </layout>
</template>
<script>
import py from "./../util/py.js";
export default {
 data() {
   return {
     nav_title: "北京T2触发"
   };
 },
 mounted() {
   console.log(py);
   var aa = py.getPinYinFirstCharacter("阿里福尼亚", ",", false).split(",")[0];
   console.log(aa);
 }
};
</script>
<style >
.vx-group {
 text-align: left;
 /* margin:0 0 0.25rem 0 */
}
.custom-business-list {
 height: calc(160px + 0.6rem);
 padding: 0.2rem;
 display: flex;
 align-items: center;
 width: 100%;
 justify-content: space-between;
 align-content: space-between;
 flex-wrap: wrap;
 box-sizing: border-box;
}
.custom-business-list .business-list-item {
 height: 80px;
 background: #007ACC;
 border-radius: 10px;
 color:#fff;
 width: calc(50% - 0.1rem);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}
</style>

尝试

1.我尝试了在 没有办法解决。
2.尝试了

import {XBody} from 'vx-ui'

export default {
  components:{
      XBody,
    },

都没能解决这个问题，
希望可以有办法解决这个问题。