iview render bug & vue namespace bug
iview render bug
https://codepen.io/xgqfrms/pen/gyGjKP
https://codepen.io/xgqfrms/full/gyGjKP
bug
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="xgqfrms">
<meta name="generator" content="VS code">
<title>vue & iview</title>
<!-- libs -->
<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
<!-- css -->
<style lang="css">
.audit-common-lable{
width: 120px;
display: inline-block;
text-align: left;
margin: 5px;
}
.audit-common-lable-long{
width: 60px;
display: inline-block;
text-align: right;
}
.audit-common-lable::after,
.audit-common-lable-long::after{
display: inline-block;
content: ":";
width: 0;
border: 1px;
margin: 2px;
}
</style>
</head>
<body>
<section>
<div id="app">
<template>
<i-row>
<i-col span="24" push="1" style="margin: 5px;">
<span class="audit-common-lable-long">请求方式</span>
<i-switch
style="width: 57px"
size="large"
@on-change="onSwitchChange"
v-model="isGet">
<span slot="open">GET</span>
<span slot="close">POST</span>
</i-switch>
</i-col>
</i-row>
</template>
<template>
<i-row>
<i-col span="24" push="1" style="margin: 5px;">
<span class="audit-common-lable-long">URL</span>
<i-input
v-model="url"
placeholder="请输入 URL!"
style="width: 300px"
prefix="md-link"
/>
</i-col>
</i-row>
</template>
<template>
<i-row>
<i-col span="24" push="1" style="margin: 5px;">
<span class="audit-common-lable-long">授权方式</span>
<i-select
aria-placeholder="授权方式"
placeholder="请选择授权方式"
style="width: 200px"
v-model="authorization"
@on-change="onChangeSelect(`authorization`)"
:filterable="false"
:clearable="false">
<i-option
v-for="(item, i) in authorizations"
:value="item.value"
:key="i">
{{item.title}}
</i-option>
</i-select>
</i-col>
</i-row>
</template>
<template>
<i-row v-if="authorization==='auth'">
<i-col span="24" push="1" style="margin: 5px;">
<span class="audit-common-lable-long">Username</span>
<i-input
v-model="url"
placeholder="请输入 Username!"
style="width: 300px"
prefix="md-contact"
/>
</i-col>
<i-col span="24" push="1" style="margin: 5px;">
<span class="audit-common-lable-long">Password</span>
<i-input
v-model="url"
placeholder="请输入 Password!"
style="width: 300px"
prefix="md-lock"
/>
</i-col>
</i-row>
</template>
<template>
<i-row v-if="authorization==='token'">
<i-col span="24" push="1" style="margin: 5px;">
<span class="audit-common-lable-long">Token</span>
<i-input
v-model="url"
placeholder="请输入 Token!"
style="width: 300px"
prefix="md-lock"
/>
</i-col>
</i-row>
</template>
<template v-if="isGet">
<i-row>
<i-col span="18" push="1" style="margin: 5px;">
<span class="audit-common-lable">GET 参数列表</span>
<i-button
@click="addGetParams"
size="small">
+ 添加
</i-button>
<!-- :maxHeight="maxGetHeight" -->
<i-table
style="margin: 5px; max-height: 300px; overflow-y: auto;"
:columns="colsGET"
:data="dataGET">
</i-table>
</i-col>
</i-row>
</template>
<template v-else>
<i-row>
<i-col span="23" push="1" style="margin: 5px;">
<span class="audit-common-lable">POST 参数方式</span>
<i-switch
style="width: 57px"
size="large"
@on-change="onSwitchRadioChange"
v-model="isJSON">
<span slot="open">form data</span>
<span slot="close">JSON</span>
</i-switch>
</i-col>
<i-col span="23" push="1" style="margin: 5px;" v-if="isJSON">
<span class="audit-common-lable">参数类型(form data)</span>
<i-table
style="margin: 5px;"
:columns="colsPOST"
:data="dataPOST">
</i-table>
</i-col>
<i-col span="6" push="1" style="margin: 5px;" v-else>
<span class="audit-common-lable">参数类型(JSON)</span>
<i-input
style="margin: 5px; width: 500px;"
placeholder="请输入 JSON String"
v-model="jsonString"
:rows="8"
type="textarea">
</i-input>
</i-col>
</i-row>
</template>
<template>
<i-row>
<i-col span="24" push="1" style="margin: 5px;"></i-col>
<i-col span="2" push="1" style="margin: 5px;">
<i-button
@click="showSave"
size="small"
type="warning">
保存
</i-button>
</i-col>
<i-col span="2" push="0" style="margin: 5px;">
<i-button
:disabled="!isSaved"
@click="showExecute "
size="small"
type="primary">
执行
</i-button>
</i-col>
</i-row>
<Modal
v-model="saveModal.visible"
title="确定保存">
<span></span>
<div slot="footer">
<i-button
type="error"
size="large"
:loading="saveModal.loading"
@click="cancelSave">
取消
</i-button>
<i-button
type="success"
size="large"
:loading="saveModal.loading"
@click="resureSave">
确定
</i-button>
</div>
</Modal>
<Modal
v-model="executeModal.visible"
@on-ok="resureExecute"
@on-cancel="cancelExecute"
title="确定执行">
<!-- 确定执行 -->
</Modal>
</template>
</div>
</section>
<!-- js -->
<script>
new Vue({
el: "#app",
data: {
saveModal: {
visible: false,
loading: false,
},
executeModal: {
visible: false,
loading: false,
},
isGet: true,
colsGET: [
{
title: "key",
key: "keyword",
},
{
title: "value",
key: "value",
},
{
title: "desc",
key: "description",
render: (h, params) => {
let {
isEdit,
description: desc,
} = params.row;
if (isEdit) {
return h("div", [
h("input", {
attrs: {
value: desc,
placeholder: "请输入描述信息",
}
}, ""),
]);
} else {
return h("div", [
h("span", desc),
]);
}
}
},
{
title: "操作",
key: "operate",
render: (h, params) => {
let that = this;
let isEdit = params.row.isEdit;
let edit = params.row.operate[0];
let save = params.row.operate[1];
if (isEdit) {
return h("div", [
h("Icon", {
props: {
name: "person"
}
}),
h("a", {
on: {
click: () => {
console.log(`row =\n`, JSON.stringify(params.row, null, 4),);
that.clickSave(params.row.index);
},
},
}, save),
]);
} else {
return h("div", [
h("a", {
on: {
click: () => {
console.log(`编辑 row =\n`, JSON.stringify(params.row, null, 4), params.row.index);
that.clickEdit(params.row.index);
},
// click: that.clickEdit(params.row.index),
},
}, edit),
]);
}
},
},
],
dataGET: [
{
index: 0,
keyword: "a",
value: "1",
description: "a=1",
operate: ["edit", "save", "cancel"],
isEdit: true,
// isEdit: false,
},
{
index: 1,
keyword: "b",
value: "2",
description: "b=1",
operate: ["edit", "save", "cancel"],
isEdit: false,
},
],
colsPOST: [],
dataPOST: [],
authorizations: [
{
title: "No Auth",
value: "no",
},
{
title: "Basic Auth",
value: "auth",
},
{
title: "Bearer Token",
value: "token",
},
],
url: "",
authorization: "no",
isJSON: true,
postType: "form",
jsonString: "",
isSaved: false,
maxGetHeight: 300,
},
methods: {
addGetParams() {
this.dataGET.push({
keyword: "a",
value: "1",
description: "a=1",
operate: ["edit", "save", "cancel"],
});
},
showSave() {
this.saveModal.visible = true;
},
showExecute() {
this.executeModal.visible = true;
},
resureSave() {
this.saveModal.visible = false;
this.isSaved = true;
},
cancelSave() {
this.saveModal.visible = false;
this.isSaved = false;
},
resureExecute() {
this.executeModal.visible = false;
},
cancelExecute() {
this.executeModal.visible = false;
},
onSwitchChange() {
// this.isGet = !this.isGet;
console.log(`value =`, this.isGet);
},
onSwitchRadioChange() {
let value = this.isJSON;
console.log(`isJSON value =`, value);
if (value) {
this.postType = "json";
} else {
this.postType = "form";
}
console.log(`postType = `, this.postType);
},
onChangeSelect (type = ``) {
let value = this[type];
// this.$Message.info(value);
},
onChangeRadio (type = ``) {
let value = this[type];
this.$Message.info(value);
},
onChangeRadioGroup (type = ``) {
let value = this[type];
this.$Message.info(value);
},
clickSave(index = ``) {
if (index !== ``) {
console.log(`table index =`, index);
this.dataGET[index].isEdit = true;
}
},
clickEdit(index = ``) {
if (index !== ``) {
console.log(`table index =`, index);
this.dataGET[index].isEdit = true;
}
},
},
mounted() {
//
},
})
</script>
</body>
</html>
vue namespace bug
vue & TypeError: is not a function
https://stackoverflow.com/questions/49950029/vue-uncaught-typeerror-fn-bind-is-not-a-function
iview render bug & vue namespace bug的更多相关文章
- vue h render function & render select with options bug
vue h render function & render select with options bug https://github.com/xgqfrms/vue/issues/41 ...
- vue & less bug
vue & less bug bezierEasingMixin(); ^ Inline JavaScript is not enabled. Is it set in your option ...
- vue bug & data type bug
vue bug & data type bug [Vue warn]: Invalid prop: type check failed for prop "value". ...
- js & 快捷键 & vue bind bug
js & 快捷键 & vue bind bug how to prevent addEventListener bind many times solution dataset &am ...
- 【iview input 回车刷页面bug】input 就一个的时候 有form的时候 回车会刷页面，如果就一个input，可以不要form，或者form里面两个input 将一个input v-show false 就可以了
[iview input 回车刷页面bug]input 就一个的时候 有form的时候 回车会刷页面,如果就一个input,可以不要form,或者form里面两个input 将一个input v-sh ...
- vue iview render里面 没有双向绑定 renderHeader 要序列化 反序列 一下
vue iview render里面 没有双向绑定 renderHeader 要序列化 反序列 一下 renderHeader: (h, params) => { return [ h('Rad ...
- vue-cli & plugin:vue/strongly-recommended bug
vue-cli & plugin:vue/strongly-recommended bug ESLint plugin:vue/strongly-recommended module.expo ...
- vuex bug & vue computed setter
vuex bug & vue computed setter https://vuejs.org/v2/guide/computed.html#Computed-Setter [Vue war ...
- puppeteer render local HTML template bug
puppeteer render local HTML template bug ➜ url-to-poster git:(master) ✗ dev ^-v-^ app is running in ...
随机推荐
- 转://Linux下误删除/home目录的恢复方法
一般情况下,我们在安装Oracle数据库的时候,都会创建一个Oracle用户,用该用户来安装和管理Oracle.Oracle用户的根目录就是/home/oracle. 通常安装Oracle数据库是按照 ...
- jenkins进行andriod打包，上传蒲公英
环境:macos jenkins sdk gradle 1.构建操作注意: mac电脑上 选择invoke gradle task数值是:clean 2.再创建一个task 然后进行gradle加参数 ...
- P2068 统计和（树状数组模板）
这是一道树状数组题 #include<iostream> using namespace std; ; int tree[maxn], n, m; char h; int x, y; vo ...
- day14（2）---列表推导式、生成器推导式、字典推导式、三元表达式
一.列表推导式: ls = [元素表达式 for i in 可迭代对象 if 筛选条件] 案例: # -*- coding: utf-8 -*- '''列表生成式练习''' # 练习一(三元表达式): ...
- python：利用configparser模块读写配置文件
在自动化测试过程中,为了提高脚本的可读性和降低维护成本,将一些通用信息写入配置文件,将重复使用的方法写成公共模块进行封装,使用时候直接调用即可. 这篇博客,介绍下python中利用configpars ...
- Intellij Idea 2017创建web项目及tomcat部署实战
相关软件:Intellij Idea2017.jdk16.tomcat7 Intellij Idea直接安装(可根据需要选择自己设置的安装目录),jdk使用1.6/1.7/1.8都可以,主要是配置好系 ...
- 如何查看IntelliJ IDEA的版本信息
作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. IDEA的版本信息问题 额,说实在的,这篇文章十三一开始也不是很想整 ...
- 朱晔和你聊Spring系列S1E4：灵活但不算好用的Spring MVC
阅读PDF版本 本文会以一些例子来展现Spring MVC的常见功能和一些扩展点,然后我们来讨论一下Spring MVC好用不好用. 使用SpringBoot快速开始 基于之前的parent模块,我们 ...
- Python全栈开发之路 【第六篇】：Python基础之常用模块
本节内容 模块分类: 好处: 标准库: help("modules") 查看所有python自带模块列表 第三方开源模块: 自定义模块: 模块调用: import module f ...
- Centos7 下SVN迁移
SVN迁移需要做如下操作: 1. 将原来的Repository导出 . #svnadmin dump 原有repos的目录路径 > dumpfile (不同服务器安装目录不同,根据具体情况调整) ...