Tweet
Hi,
For my company I need to develop some 'advanced' UI tools inside details and edit view. Don't want to learn current stack in details and want using modern stack, I made some test to integrate vuejs with modern components stack. I test vuejs, quasar, element-ui.
vuejs is working very well, just drop-in. We can inject 'model' as is and use it (model.get('name'), model.set('name',var'), model.save(...)
Quasar Framework use too much style glitch and need to rebuild all the css theme.
Element-UI work perfectly, 4 lines of codes.
inside html (grunt or main.html):
inside template: fieldsView.tpl
inside customView.js:
For my company I need to develop some 'advanced' UI tools inside details and edit view. Don't want to learn current stack in details and want using modern stack, I made some test to integrate vuejs with modern components stack. I test vuejs, quasar, element-ui.
vuejs is working very well, just drop-in. We can inject 'model' as is and use it (model.get('name'), model.set('name',var'), model.save(...)
Quasar Framework use too much style glitch and need to rebuild all the css theme.
Element-UI work perfectly, 4 lines of codes.
inside html (grunt or main.html):
HTML Code:
</body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
Code:
<div id="q-field-tasks-{{name}}">
<el-steps :active="2" align-center>
<el-step title="Step 1" description="Some description"></el-step>
<el-step title="Step 2" description="Some description"></el-step>
<el-step title="Step 3" description="Some description"></el-step>
<el-step title="Step 4" description="Some description"></el-step>
</el-steps>
<el-checkbox-group v-model="checkList">
<el-checkbox label="Option A"></el-checkbox>
<el-checkbox label="Option B"></el-checkbox>
<el-checkbox label="Option C"></el-checkbox>
<el-checkbox label="disabled" disabled></el-checkbox>
<el-checkbox label="selected and disabled" disabled></el-checkbox>
</el-checkbox-group>
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
Code:
afterRender: function () {
if (this.mode === 'detail') {
var self = this;
new Vue({
el: '#q-field-tasks-' + self.name,
data() {
return {
visible: false,
checkList: ['selected and disabled', 'Option A']
}
},
methods: {
test() {
return "hello";
}
}
});
}
}
Comment