chenz24 / vue-blu Goto Github PK
View Code? Open in Web Editor NEWUI Component Library Base on Vue.js(2.x) and Bulma
License: MIT License
UI Component Library Base on Vue.js(2.x) and Bulma
License: MIT License
template>
<div class="columns" id="bottom-nav-fixed">
<div class="column">
<tabs :on-tab-click="tabCallback" type="toggle" :is-full-width="true" layout="bottom" >
<tab-item label="Pictures" icon="image"></tab-item>
<tab-item label="Music" icon="music"></tab-item>
<tab-item label="Videos" icon="film"></tab-item>
<tab-item label="Documents" icon="file-text-o"></tab-item>
</tabs>
</div>
</div>
</template>
tabCallback:function(s){
this.$notify.info({content:"打开了第 "+(s+1)+" 个tab"+" ,路由为"+this.routerlist[s]+"标题:"+this.label})//这里获取不到label 提示未定义,如果用this.tabpanes.label也获取不到 children也获取不到,源码中这个是被集成过来的
this.$router.push(this.routerlist[s])
}
例如:目前我想实现类似于方框形的那个tab,不论多少tab,中间是等分的的宽度
layout里面的12等分布局,在mobile下不论怎样都会每行一个块级显示
多媒体组件没有:例如卡片组件,单纯构建一个图文卡片,这个很有用
列表list目前也是没有看到
win10
code
const data = [{'id': 1, 'work_no': '23-4608596', 'given_name': '哲恒', 'family_name': '鲁', 'name': '鲁哲恒', 'birthday': '1986-03-24', 'email': '[email protected]', 'gender': 'Male', 'achievement': 81.0, 'remark': 'bibendum imperdiet nullam orci pede'}]
export default {
components: {
Xcontent
},
data () {
return {
data: data
}
},
computed: {
pagination () {
return {
total: this.data.length,
layout: 'total, pager'
}
}
}
}
Hi,
First of all thanks for the nice library!
I think I've found a bug while using the popconfirm component. I've used it to confirm a deletion of an object. When clicking on 'OK', the component itself is removed (so including the popconfirm component). Although the popconfirm component doesn't exist anymore, it tries to destroy itself after a timeout of 300ms, which results in the following error message:
Uncaught TypeError: Cannot read property 'destroy' of null
A workaround is to set a timeout before removing the component, but that's not really a nice thing to do.
Do you have a solution for this?
Thanks!
form表单中能实现表单验证功能吗
看了下源码 比如pagination
watch: {
current(val) {
if (val !== this.interCurrent) {
this.handleChangePage(val);
}
}
}
current
修改的时候,会触发handleChangePage
但是 因为interCurrent修改的时候,没有同步修改传进来的prop current,所以可能watch的current并不一定会被触发。
打个比方,一开始current传进来的时候是1
,点击页码变成第2页,即interCurrent被修改成了2,此时,如果在父级去设置this.current=1
,这时候,pagination
就不工作了,因为一直都是1
vue组件化主张的应该是不去修改props的,1.x版本有.sync
被废除了,额。。。。觉得越来越别扭
In src/index.js the following lines cause errors due to missing src/components/select module in vue-blu-master:
Line 33:
import { Select, Option } from './components/select';
Lines 74/75:
bSelect: Select,
bOption: Option,
[Vue warn]: Error when rendering component
Example: if I want add a label id in the InputNumber component's callback function to find which label is changed, what can I do?
I was looking to find the docs in English but could not.
请问是不是download,然后运行index.html就能显示Demo的界面?
Hey,
at the moment it isn't possible to use a simple list inside a tab.
<ul>
<li>Foo</li>
<li>Bar</li>
</ul>
Perhaps you could use div
Elements for the structure instead of ul/li.
What do you think?
Bye,
Alexander
I'm not sure if "refresh" is the right word, but is there a way to manually trigger loading/initialization of components that are within a modal or an aside?
Not sure if this is related to #44 but if I have a Google Maps autocomplete field or map within an aside, it doesn't load properly (the autocomplete doesn't work and the map only renders the Google logo but not the map tiles/icons). I'm using https://github.com/xkjyeah/vue-google-maps
For example, this will render a map if used in the main part of a page:
<gmap-map
:center="{lat:10, lng:10}"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
></gmap-map>
However if I put this within an aside (<b-aside>
) element it only renders the Google logo and does not load the map tiles. Likewise other components like the Autocomplete work in the main page but not within the aside.
I was wondering if there is a way to trigger the aside to "refresh" to load/init these elements, or is there a better way of doing it? i.e. is there some Vue way of initializing/triggering components to load manually?
Are there any plans to implement the nav component? (http://bulma.io/documentation/components/nav/)
I included vue-blu.js and:
Vue.use(window["vue-blu"]);
I got Uncaught TypeError: a.apply is not a function
IE 11 console says SCRIPT438: Object doesn't support property or method 'remove'
建议出一个简单的后台模板脚手架,便于框架的推广使用者快速入门
The Notify and Modal components doesn't have any closing animation, any chance to have this?
In docs it says that the default for closable is false.
Re https://chenz24.github.io/vue-blu/?ref=madewithvuejs#/customize
node_modules\vue-blu\src\scss\elements\progressbar.scss has an undefined $font variable
I can fix this my setting $font in my variables.scss but it might be an idea to set a default :)
Also I noticed that if I use scss my fonts/colours look like the Bulma defaults, but if I import the dist css it looks like the Vue Blu site. It might be nicer for users to use the default Bulma styles for the dist css :)
vue-blu.min.js is looking for jquery when I try to run npm run dev
Do I need jQuery or am I missing something?
I use Laravel mix. I'm not sure if this is Vue-blu
issue or Laravel issue.
I noticed that if you try to exceed the max attribute the value is set to the max. That's nice :)
It would be nice for min to work the same, i.e. if someone attempts to backspace/delete the value it automatically sets to the min attribute.
Currently the console displays the following when the value is deleted:
[Vue warn]: Invalid prop: type check failed for prop "val". Expected Number, got String. (found in component <InputNumber>)
I copy/pasted the example from the demo:
<datepicker placeholder="开启时间选择.." :options="{enableTime: true}"></datepicker>
However I couldn't see the time picker part. I inspected the HTML and saw there was a .flatpickr-time
element however its height was set to 0 in the CSS. Guessing it's a bug but let me know if you can repro.
十分抱歉的提出这个需求,我是一个想要入门的新手。
看到您的前端框架,十分想要体验一下。 但是以前没有使用过npm之类的东西。
看不懂您写的Quick Start。
不知道该在什么地方import 。
还望不吝赐教。
I'm using a datepicker component within an aside, and I'm setting its v-model to an empty string each time I open the aside modal, however if I choose a date, close the modal, the re-open the modal, the date I last picked is still shown in the datepicker (even though the v-model variable has been reset to an empty string).
The way I'm using to get around this is to give the datepicker a ref, e.g. <datepicker ref="date"
and then when the modal is closed I not only reset the v-model variable but also call vm.$refs.date.flatPickr.clear()
which seems to work.
So the bug seems to be that the value remains in the field after a date is selected, even if the v-model variable is reset.
It would be nice if we could set the class on InputNumber fields like you can with standard Bulma fields (for things like validation, e.g.
:class="{'input': true, 'is-danger': fieldInvalid }"
Using the above currently adds the styling to the outer container making it look like a field within a field.
(also, on the docs in the API section you've put "me" instead of "min" for the minimum value attribute)
你好,vue-blu很漂亮,小伙伴儿们看了也都挺喜欢!
冒昧的问一下,这个项目目前就你一个人在维护吗?会不会一直维护下去呢?
Can I use my current Bulma variables (colors, font-family, etc) to work on vue-blu? How?
不错不错哦
Any way to import components on demand? Something like
import { Alert, Tooltip } from 'vue-blu'
Vue.component('alert', Alert)
That doesn't work.
需要用到什么知识点?能详细说一下吗?
When I try npm run dev
I get this error:
Error: Cannot find module '/Users/ae/develop/_web/_hugo/artifacial/node_modules/vue-blu/build/dev-server.js'
I did npm install
in the vue
directory to load the dependencies. Obviously it is missing the whole build
directory. I think I am missing something in the process?
If I type a number in an InputNumber field and hit "+" it concatenates the 1, eg enter 5, hit "+" button, field shows 51 not 6. Likewise hitting "-" shows "5-1".
Need to convert input value to integer first :)
<menu-item v-for="page in sidebarPages" :click="changePage"> <span>{{page.name}}</span> </menu-item>
执行changpage事件的时候如果获取page
if i have in my main.js
import 'vue-blu/src/scss/main.scss'
webpack answers this:
Module parse failed: C:\Users\pietro.caruso\Desktop\archi-suite\node_modules\vue-blu\src\scss\main.scss Unexpected character '@' (8:0)
You may need an appropriate loader to handle this file type.
i am using the webpack-simple config with sass enabled
Hello,
I am a bit confused on how to call the change function for checkboxes:
I expected something like this:
<checkbox val="Kobe" @change="changeFunction">Kobe</checkbox>
But the call always goes to the _default function of the change properties instead of the "changeFunction"? So now we are using watch on the array and trigger changeFunction from there but I guess that this is not the intended behavior?
Besides this, wonderful work and I would love to see you on patreon.
The default title for this.$modal.confirm
is "提示" instead of "Confirm" or "Prompt" or blank.
可以用script标签引入吗?
如题。
还有能不能再vue-admin中直接集成呢?
Thank you for adding the ok-loading attribute, I'm using it when submitting a form and waiting for the remote response before then manually closing the modal.
Is it possible to have the Ok button stop spinning in the case where the remote response comes back with an error? i.e. is there a way to manually stop the loading spinner and make the button show "Ok" again?
Re https://chenz24.github.io/vue-blu/#/components/aside
Is there a way to specify a callback for the footer buttons on the aside component?
Clicking "OK" or "Cancel" both close the aside and there's no documentation for calling extra functions.
内置的Bulma样式与bulma官网的最新样式一起用的时候,样式有冲突
内置是v0.2.3版本,最新是v0.3.1 版本。
样式就冲突了
When the page size changes in the demo, "pageSize 50" etc is output in teh console. How do I turn this off?
Also, if a user is showing 10 per page, then goes to the last page, but then chooses to show 50 per page, the current page property should change to the last possible page. e.g. if I have 15 items and I'm showing 10 per page, and my current page is page 2, when I chose to show 20 per page nothing shows because I am still on page 2. Instead, pagination.current should reset to 1 because that's the last possible page I can be on.
I was going to set this myself in the callback but didn't know how to access the private page-size attribute (that gets printed to the console) if I'm using a computed pagination object.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.