@jx3box/jx3box-editor 2.2.4 → 2.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/css/tinymce/combo.less +0 -1
- package/assets/js/combo.js +1 -1
- package/package.json +1 -1
- package/src/components/Combo.vue +97 -24
package/assets/js/combo.js
CHANGED
|
@@ -21,7 +21,7 @@ function renderCombo(selector = ".e-skill-combo") {
|
|
|
21
21
|
// 渲染
|
|
22
22
|
let code = `
|
|
23
23
|
<span class="w-skill-combo-item">
|
|
24
|
-
<img class="u-skill-icon w-jx3-element" src="${iconLink(icon)}" alt="${icon}"
|
|
24
|
+
<img class="u-skill-icon w-jx3-element" src="${iconLink(icon)}" alt="${icon}" data-type="skill" data-id="${id}" data-client="${client}" />
|
|
25
25
|
<span class="u-skill-name" title="${name}">${name}</span>
|
|
26
26
|
<span class="u-skill-note" title="${n}" style="color:${c};font-size:${fz}px;font-weight:${fw}">${n}</span>
|
|
27
27
|
<i class="u-gcd-icon ${gcd == 0 ? 'is-show' : ''}" title="无GCD技能">
|
package/package.json
CHANGED
package/src/components/Combo.vue
CHANGED
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
<i class="el-icon-time"></i>
|
|
77
77
|
</i>
|
|
78
78
|
<span class="u-name" :title="skill.Name">{{ skill.Name }}</span>
|
|
79
|
-
<span class="u-note" :title="skill.n">{{ skill.n }}</span>
|
|
79
|
+
<span class="u-note" :title="skill.n" :style="itemStyle(skill)">{{ skill.n }}</span>
|
|
80
80
|
</div>
|
|
81
81
|
<i class="u-remove-icon" title="移除" @click="removeSelected(index)"><i class="el-icon-close"></i></i>
|
|
82
82
|
</li>
|
|
@@ -84,6 +84,32 @@
|
|
|
84
84
|
</div>
|
|
85
85
|
</div>
|
|
86
86
|
</div>
|
|
87
|
+
<el-dialog :visible.sync="showRemark" width="600px" append-to-body v-draggable class="c-large-dialog" title="设置备注">
|
|
88
|
+
<el-form label-position="left" label-width="80px">
|
|
89
|
+
<el-form-item label="备注">
|
|
90
|
+
<el-input placeholder="输入备注" v-model="form.n"></el-input>
|
|
91
|
+
</el-form-item>
|
|
92
|
+
<el-form-item label="文字颜色">
|
|
93
|
+
<el-color-picker v-model="form.c" :predefine="predefineColors" show-alpha></el-color-picker>
|
|
94
|
+
</el-form-item>
|
|
95
|
+
<el-form-item label="文字大小">
|
|
96
|
+
<el-input v-model="form.fz"></el-input>
|
|
97
|
+
</el-form-item>
|
|
98
|
+
<el-form-item label="文字粗细">
|
|
99
|
+
<el-select v-model="form.fw">
|
|
100
|
+
<el-option v-for="i in 9" :key="i" :value="i * 100" :label="i * 100"></el-option>
|
|
101
|
+
</el-select>
|
|
102
|
+
</el-form-item>
|
|
103
|
+
<el-form-item label="预览">
|
|
104
|
+
<span :style="nStyle">{{ form.n || '示例文字' }}</span>
|
|
105
|
+
</el-form-item>
|
|
106
|
+
</el-form>
|
|
107
|
+
<span slot="footer" class="dialog-footer">
|
|
108
|
+
<el-button @click="showRemark = false">取 消</el-button>
|
|
109
|
+
<el-button type="primary" @click="confirm">确 定
|
|
110
|
+
</el-button>
|
|
111
|
+
</span>
|
|
112
|
+
</el-dialog>
|
|
87
113
|
</div>
|
|
88
114
|
</template>
|
|
89
115
|
|
|
@@ -94,7 +120,7 @@ import { getSkill } from "../../service/resource";
|
|
|
94
120
|
import SkillMartial from "./SkillMartial.vue";
|
|
95
121
|
|
|
96
122
|
import Sortable from "sortablejs";
|
|
97
|
-
import { cloneDeep } from "lodash";
|
|
123
|
+
import { cloneDeep, pick } from "lodash";
|
|
98
124
|
|
|
99
125
|
import LoadScript from "vue-plugin-load-script";
|
|
100
126
|
Vue.use(LoadScript);
|
|
@@ -145,17 +171,34 @@ export default {
|
|
|
145
171
|
selected: [],
|
|
146
172
|
|
|
147
173
|
sort: false,
|
|
174
|
+
|
|
175
|
+
form: {
|
|
176
|
+
n: "",
|
|
177
|
+
c: "",
|
|
178
|
+
fz: "14",
|
|
179
|
+
fw: "500"
|
|
180
|
+
},
|
|
181
|
+
showRemark: false,
|
|
182
|
+
currentSkill: {},
|
|
183
|
+
|
|
184
|
+
predefineColors: [
|
|
185
|
+
'#ff4500',
|
|
186
|
+
'#ff8c00',
|
|
187
|
+
'#ffd700',
|
|
188
|
+
'#90ee90',
|
|
189
|
+
'#00ced1',
|
|
190
|
+
'#1e90ff',
|
|
191
|
+
'#c71585',
|
|
192
|
+
'rgba(255, 69, 0, 0.68)',
|
|
193
|
+
'rgb(255, 120, 0)',
|
|
194
|
+
'hsv(51, 100, 98)',
|
|
195
|
+
'hsva(120, 40, 94, 0.5)',
|
|
196
|
+
'hsl(181, 100%, 37%)',
|
|
197
|
+
'hsla(209, 100%, 56%, 0.73)',
|
|
198
|
+
'#c7158577',
|
|
199
|
+
]
|
|
148
200
|
};
|
|
149
201
|
},
|
|
150
|
-
// watch: {
|
|
151
|
-
// sort: function (val) {
|
|
152
|
-
// if (val) {
|
|
153
|
-
// this.$nextTick(() => {
|
|
154
|
-
// this.initSkillSort();
|
|
155
|
-
// });
|
|
156
|
-
// }
|
|
157
|
-
// },
|
|
158
|
-
// },
|
|
159
202
|
computed: {
|
|
160
203
|
hasNextPage: function () {
|
|
161
204
|
return this.total > 1 && this.page < this.pages;
|
|
@@ -166,6 +209,13 @@ export default {
|
|
|
166
209
|
isBlank: function () {
|
|
167
210
|
return !this.query && !this.skill["length"];
|
|
168
211
|
},
|
|
212
|
+
nStyle() {
|
|
213
|
+
return pick({
|
|
214
|
+
color: this.form.c,
|
|
215
|
+
fontSize: (this.form.fz || 12) + 'px',
|
|
216
|
+
fontWeight: this.form.fw
|
|
217
|
+
}, ['color','fontSize','fontWeight'])
|
|
218
|
+
}
|
|
169
219
|
},
|
|
170
220
|
mounted() {
|
|
171
221
|
this.$nextTick(() => {
|
|
@@ -264,19 +314,21 @@ export default {
|
|
|
264
314
|
{
|
|
265
315
|
label: "备注",
|
|
266
316
|
onClick: () => {
|
|
267
|
-
this
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
317
|
+
this.showRemark = true;
|
|
318
|
+
this.currentSkill = skill
|
|
319
|
+
// this.$prompt("请输入备注", "备注", {
|
|
320
|
+
// confirmButtonText: "确定",
|
|
321
|
+
// cancelButtonText: "取消",
|
|
322
|
+
// inputValue: skill?.n || "",
|
|
323
|
+
// // 最长4个字
|
|
324
|
+
// inputValidator: (value) => {
|
|
325
|
+
// return value.length <= 4;
|
|
326
|
+
// },
|
|
327
|
+
// })
|
|
328
|
+
// .then(({ value }) => {
|
|
329
|
+
// this.$set(skill, "n", value);
|
|
330
|
+
// })
|
|
331
|
+
// .catch(() => {});
|
|
280
332
|
},
|
|
281
333
|
}
|
|
282
334
|
],
|
|
@@ -295,12 +347,33 @@ export default {
|
|
|
295
347
|
gcd: item.WithoutGcd ? 0 : 1,
|
|
296
348
|
};
|
|
297
349
|
item.n && (obj.n = item.n);
|
|
350
|
+
item.c && (obj.c = item.c);
|
|
351
|
+
item.fz && (obj.fz = item.fz);
|
|
352
|
+
item.fw && (obj.fw = item.fw);
|
|
353
|
+
|
|
298
354
|
item.client = this.client;
|
|
299
355
|
skills_html += `<li class="w-skill-combo-item">${item.SkillID},${item.Name},${item.IconID},${JSON.stringify(obj)}</li>`;
|
|
300
356
|
});
|
|
301
357
|
const html = `<ul class="e-skill-combo w-skill-combo">${skills_html}</ul>`;
|
|
302
358
|
return html;
|
|
303
359
|
},
|
|
360
|
+
confirm() {
|
|
361
|
+
if (this.form.n) {
|
|
362
|
+
this.$set(this.currentSkill, 'n', this.form.n);
|
|
363
|
+
this.$set(this.currentSkill, 'c', this.form.c);
|
|
364
|
+
this.$set(this.currentSkill, 'fz', this.form.fz);
|
|
365
|
+
this.$set(this.currentSkill, 'fw', this.form.fw);
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
this.showRemark = false
|
|
369
|
+
},
|
|
370
|
+
itemStyle(item) {
|
|
371
|
+
return pick({
|
|
372
|
+
color: item.c,
|
|
373
|
+
fontSize: (item.fz || 12) + 'px',
|
|
374
|
+
fontWeight: item.fw
|
|
375
|
+
}, ['color','fontSize','fontWeight'])
|
|
376
|
+
}
|
|
304
377
|
},
|
|
305
378
|
};
|
|
306
379
|
</script>
|