 Show Posts
|
|
Pages: 1 [2] 3 4 ... 6
|
|
19
|
General Category / EasyUI for Vue / Expanding custom component issues based on easyui
|
on: October 30, 2018, 11:00:56 PM
|
The project uses NPM to load easyui. I want to extend a component based on 'InputBase' but cannot export the 'INPUTBASE_INNER_TEMPLATE' constant 项目中是使用NPM加载easyui的。我想扩展一个组件是基于'InputBase' 但是无法导出'INPUTBASE_INNER_TEMPLATE'常量 INPUTBASE_INNER_TEMPLATE is undefined <script>
import { InputBase, INPUTBASE_INNER_TEMPLATE } from 'vx-easyui'
export const UI_USER_QUERY_TEMPLATE = `
<span class="f-field">
` + INPUTBASE_INNER_TEMPLATE + `
</span>
`
export default {
name: 'ui-user-query',
extends: InputBase,
template: UI_USER_QUERY_TEMPLATE,
}
</script>
|
|
|
|
|
21
|
General Category / EasyUI for Vue / Re: vue version How to expand the specified node of the treegrid component
|
on: October 26, 2018, 06:34:40 AM
|
trigger the 'rowExpand' event after, how to set icon 'loading'? 手动触发rowExpad事件，有点小问题。就是图标不是'loading'状态，怎么设置？ 我参考了TreeGridRow.js里面，怎么在外部设置loading = true? toggle(event) {
event.stopPropagation();
if (this.isExpanded){
this.$set(this.row, 'state', 'closed');
this.grid.$emit('rowCollapse', this.row);
} else {
this.loading = true;
this.$set(this.row, 'state', 'open');
this.grid.$emit('rowExpand', this.row);
}
},
|
|
|
|
|
24
|
General Category / EasyUI for Vue / how to trigger tooltip showEvent on textbox focus
|
on: October 24, 2018, 07:51:44 PM
|
run this example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI for Vue</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/vue.css">
<script src="https://www.jeasyui.com/node_modules/vx-easyui/vue.min.js"></script>
<script src="https://www.jeasyui.com/node_modules/vx-easyui/babel-polyfill.js"></script>
<script src="https://www.jeasyui.com/node_modules/vx-easyui/vx-easyui-min.js"></script>
<script src="https://www.jeasyui.com/node_modules/vx-easyui/babel.min.js"></script>
<style type="text/css">
body{
padding: 20px;
}
h2{
margin: 0 0 20px 0;
}
.mycontainer{
min-width: 700px;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var demovalidate2={
template: `
<div>
<button @click="dialogClosed=false">打开</button>
<Dialog ref="d1" bodyCls="f-column" :dialogStyle="{width:'700px',height:'550px'}" title="标题" :closed="dialogClosed" @open="onDialogOpen">
<Form ref="form" :model="user" :rules="rules" @validate="errors=$event">
<div style="margin-bottom:20px">
<Label for="name" align="top">Name:</Label>
<TextBox ref="name" inputId="name" name="name" v-model="user.name" v-Tooltip="getTipOpts('name')"></TextBox>
</div>
</Form>
<p>{{user}}</p>
</Dialog>
</div>
`,
data() {
return {
dialogClosed: true,
user: {
name: null
},
rules: {
name: ["required", "length[5,10]"]
},
errors: {}
};
},
methods: {
onDialogOpen() {
this.$nextTick(() => {
this.$refs.name.focus()
this.$refs.form.validate()
})
},
getError(name) {
return this.errors[name] && this.errors[name].length
? this.errors[name][0]
: null;
},
hasError(name) {
return this.getError(name) != null;
},
getTipOpts(name) {
return {
content: this.getError(name),
closed: !this.hasError(name),
position: "right"
};
},
}
}
var app = new Vue({
el: '#app',
template: `<demovalidate2 class="mycontainer"></demovalidate2>`,
components: {
demovalidate2:demovalidate2 }
})
</script>
<style>
.error {
color: red;
font-size: 12px;
margin: 4px 0;
}
</style>
</body>
</html>
|
|
|
|
|
26
|
General Category / EasyUI for Vue / datagrid component row group and pagination bug
|
on: October 22, 2018, 12:22:15 AM
|
The pageSize property is 10, only 9 records can be displayed after adding the 'groupField' attribute. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI for Vue</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/vue.css">
<script src="http://www.jeasyui.com/node_modules/vx-easyui/vue.min.js"></script>
<script src="http://www.jeasyui.com/node_modules/vx-easyui/babel-polyfill.js"></script>
<script src="http://www.jeasyui.com/node_modules/vx-easyui/vx-easyui-min.js"></script>
<script src="http://www.jeasyui.com/node_modules/vx-easyui/babel.min.js"></script>
<style type="text/css">
body{
padding: 20px;
}
h2{
margin: 0 0 20px 0;
}
.mycontainer{
min-width: 700px;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var demopagination2={
template: `
<div>
<h2>Pagination - Lazy Load</h2>
<div style="margin-bottom:10px">
<Label for="c1">Pager on: </Label>
<ComboBox inputId="c1" style="width:120px"
:data="pageOptions"
v-model="pagePosition"
:editable="false"
:panelStyle="{height:'auto'}">
</ComboBox>
</div>
<DataGrid style="height:450px"
:pagination="true"
:lazy="true"
:data="data"
:total="total"
:loading="loading"
:pageNumber="pageNumber"
:pageSize="pageSize"
groupField="group"
:pagePosition="pagePosition"
:pageLayout="['list','sep','first','prev','num','tpl','next','last','refresh','info']"
@pageChange="onPageChange($event)">
<GridColumn field="inv" title="Inv No"></GridColumn>
<GridColumn field="name" title="Name"></GridColumn>
<GridColumn field="amount" title="Amount" align="right"></GridColumn>
<GridColumn field="price" title="Price" align="right"></GridColumn>
<GridColumn field="cost" title="Cost" align="right"></GridColumn>
<GridColumn field="note" title="Note"></GridColumn>
<template slot="group" slot-scope="scope" >
<span style="font-weight:bold">
{{scope.value}}
</span>
</template>
</DataGrid>
</div>
`,
data() {
return {
total: 0,
pageNumber: 1,
pageSize: 10,
data: [],
loading: false,
pagePosition: "bottom",
pageOptions: [
{ value: "bottom", text: "Bottom" },
{ value: "top", text: "Top" },
{ value: "both", text: "Both" }
]
};
},
created() {
this.loadPage(this.pageNumber, this.pageSize);
},
methods: {
onPageChange(event) {
this.loadPage(event.pageNumber, event.pageSize);
},
loadPage(pageNumber, pageSize) {
this.loading = true;
setTimeout(() => {
let result = this.getData(pageNumber, pageSize);
this.total = result.total;
this.pageNumber = result.pageNumber;
this.data = result.rows;
this.loading = false;
}, 1000);
},
getData(pageNumber, pageSize) {
let total = 100000;
let data = [];
let start = (pageNumber - 1) * pageSize;
for (let i = start + 1; i <= start + pageSize; i++) {
let amount = Math.floor(Math.random() * 1000);
let price = Math.floor(Math.random() * 1000);
data.push({
group:'group',
inv: "Inv No " + i,
name: "Name " + i,
amount: amount,
price: price,
cost: amount * price,
note: "Note " + i
});
}
return {
total: total,
pageNumber: pageNumber,
pageSize: pageSize,
rows: data
};
}
}
}
var app = new Vue({
el: '#app',
template: `<demopagination2 class="mycontainer"></demopagination2>`,
components: {
demopagination2:demopagination2 }
})
</script>
</body>
</html>
|
|
|
|
|
28
|
General Category / EasyUI for Vue / menu component props menuWidth don't work
|
on: October 14, 2018, 09:31:34 PM
|
<Menu ref="m1" :menuWidth="134">
<Menu-Item text="New"></Menu-Item>
<Menu-Item text="Save" iconCls="icon-save"></Menu-Item>
<Menu-Item text="Print" iconCls="icon-print" :disabled="true"></Menu-Item>
<Menu-Item text="Exit"></Menu-Item>
</Menu>
跟vue.css里面min-width起冲突 .menu-container{
position: absolute;
left: 0;
top: 0;
min-width: 200px;
}
|
|
|
|
|
29
|
General Category / EasyUI for Vue / treegrid please add 'getCheckedNodes' methods
|
on: October 13, 2018, 01:30:39 AM
|
|
目前要获取所有选择节点非常麻烦。需要监听'rowCheck'、'rowUncheck'两个方法。还需要判断是否子节点。因此建议treegrid组件内置getCheckedNodes方法。
---------------------------------------
It is very troublesome to get all the selection nodes at the moment. Need to listen to the 'rowCheck', 'rowUncheck' two methods. You also need to determine if the child node. It is therefore recommended that the treegrid component have a built-in getCheckedNodes method.
|
|
|
|
|
