同步uni1 web端组件示例

manifest.json

@@ -56,6 +56,13 @@
   "h5": {
     "router": {
       "base": "/web/"
+    },
+    "sdkConfigs" : {
+        "maps" : {
+            "qqmap" : {
+                "key" : "TKUBZ-D24AF-GJ4JY-JDVM2-IBYKK-KEBCU"
+            }
+        }
     }
   }
 }

pages.json

@@ -1231,6 +1231,48 @@
         "navigationBarTitleText": "如何使用浏览器 canvas"
       }
     },
+    {
+      "path" : "pages/component/movable-view/movable-view",
+      "style" :
+      {
+        "navigationBarTitleText" : "movable-view"
+      }
+    },
+    {
+      "path" : "pages/component/label/label",
+      "style" :
+      {
+        "navigationBarTitleText" : "label"
+      }
+    },
+    {
+      "path" : "pages/component/picker/picker",
+      "style" :
+      {
+        "navigationBarTitleText" : "picker"
+      }
+    },
+    {
+      "path" : "pages/component/map/map",
+      "style" :
+      {
+        "navigationBarTitleText" : "map"
+      }
+    },
+    {
+      "path" : "pages/component/cover-view/cover-view",
+      "style" :
+      {
+        "navigationBarTitleText" : "cover-view"
+      }
+    },
+    {
+      "path" : "pages/component/editor/editor",
+      "style" :
+      {
+        "navigationBarTitleText" : "editor"
+      }
+    },
     // #endif
     // #ifdef APP
     {

pages/component/cover-view/cover-view.uvue

+<template>
+	<view>
+		<page-head title="cover-view用于覆盖map、video等原生组件"></page-head>
+		<view class="cover-content">
+			<map :latitude="latitude" :longitude="longitude"></map>
+			<cover-view class="cover-view">简单的cover-view</cover-view>
+			<cover-image class="cover-image" src="/static/uni.png"></cover-image>
+		</view>
+	</view>
+</template>
+
+<script lang="uts">
+	export default {
+		data() {
+			return {
+				showMap: false,
+        latitude: 39.909,
+        longitude: 116.39742
+			};
+		},
+		onLoad() {
+      this.showMap = true
+		}
+	}
+</script>
+
+<style>
+	map {
+		width: 100%;
+		height: 600px;
+	}
+
+	.cover-content {
+		position: relative;
+	}
+
+	.cover-view {
+		position: absolute;
+		left: 5px;
+		top: 5px;
+		width: 375rpx;
+		text-align: center;
+		background-color: #DDDDDD;
+	}
+
+	.cover-image {
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		margin: auto;
+		width: 96px;
+		height: 96px;
+	}
+</style>

pages/component/editor/editor-icon.css

+@font-face {
+    font-family: 'iconfont';
+    src: url('data:font/truetype;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTYZt980AACuYAAAAHEdERUYAKQBBAAAreAAAAB5PUy8yPJdOmAAAAVgAAABWY21hcLyvuFAAAAJMAAACGmdhc3D//wADAAArcAAAAAhnbHlm1+PZcgAABOAAACD0aGVhZBRVFL8AAADcAAAANmhoZWEISgQAAAABFAAAACRobXR4TS8LYAAAAbAAAACcbG9jYQhHD/wAAARoAAAAeG1heHABTgChAAABOAAAACBuYW1lKeYRVQAAJdQAAAKIcG9zdLoCe30AAChcAAADEgABAAAAAQAAUo9exF8PPPUACwQAAAAAANhk6GIAAAAA2GToYgAA/34EbAOAAAAACAACAAAAAAAAAAEAAAOA/4AAXARsAAAAAARsAAEAAAAAAAAAAAAAAAAAAAATAAEAAAA7AJUACQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQBAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5ifspQOA/4AAXAOAAIIAAAABAAAAAAAABAAAAAAAAAABVQAABAAALwQAAJ0EAAAeBAAAQARsAAAEAAACBAAANwQAADcEAACVBAAAmgQAAJoEAAA+BAAAQAQAACUEAQAABAAAQAAnAIAAgABgAIAAgACAAIAAeAAAAFAAMABgAEAAYAAgAEAAOQAgAGAAYACAAD8AYAAgAEAA1wBeACEAwACAAOAAogBgABoAIQBgADIAiwBAAAAAAwAAAAMAAAAcAAEAAAAAARQAAwABAAAAHAAEAPgAAAA6ACAABAAa5ifmK+Yx5jPmPuZN5mDmZOZu5njmfuaE5ujm/ecs513n+Ohg6GXpZOso7AnsE+x87JTsnuyg7KX//wAA5ifmK+Yx5jPmPuZN5l/mZOZt5njmfuaE5ujm/ecs51zn+Ohg6GPpZOso7AnsE+x67H/snuyg7KX//xncGdkZ1BnTGckZuxmqGacZnxmWGZEZjBkpGRUY5xi4GB4Xtxe1FrcU9BQUFAsTpROjE5oTmROVAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgB8ANIA7AGaAiwCugNGBCAEgATiBRgFfgXyBl4GfAbGBwAHOAeWB7wH5ggoCGgI5AlSCaIKIgqmCxILPAtKC64L+gw8DIQMpgzKDQYNKA1GDaAN4g4MDlIObA6gDs4O6g8MD2APpA/GD+gQHhB6AAEAL/+AA8ADgAAJAAABNQkBNQQCFyYSAkABgP6A/r1YYdeEAoj4/oD+gP4G/rCo+QIEAAACAJ0ACANqAtQAKwA9AAAlIS4BJxE+ATchHgEXFQ4BIiY9AS4BJyEOAQcRHgEzITI2NzU0NjIWFxUOASUiLwEmNDYyHwEBNjIWFAcBBgL2/hsxQQICQTEB6y4+AgESGxIBGhP+FRYdAQEdFgHlFh0BEhsSAQJB/qoNCqMKFBkKjQFgChkUCv6KCggBQTEB5jBCAQE+Lx4NEhINHhQZAQEdFf4aFh0dFvkOEhIO+TFBnwqjChoTCY0BYAoUGQr+iQkAAAAABAAeAEoD4gJoAA8AGwAnADAAAAEGBAcmJC8BNzYkNxYEHwElDgEHHgEXPgE3LgEDLgEnPgE3HgEXDgEnDgEUFjI2NCYD0Ar+/sTE/v4LERELAQLExAECChL+Ho3WKirWjY3WKirWjTpNAQFNOjpNAQFNOh8qKj4qKgFEFtUPD9UWFRUX1Q4O1RcVzgeVMjKUCAiUMjKV/qwCTzw8UAEBUDw8T9cBK0ArK0ArAAEAQP+AA9EDgAAJAAAFNgIlFQkBFQQSAvphWP69/oABgAGNhICoAVAG/gGAAYD4C/38AAAIAAD/gARsA4AAHwArAEAATABVAGIAaAB1AAAFIikBLgEnET4BNzMVIyIGHQEhNS4BKwE1Mx4BFxEOARMiKQERFBYzITI2NwEwDwEGDwEjNzEuASc+ATceARcUBycOARQWMj8BNjcuAQUGDwE1NzMRIwEuASc1PgEyFh0BFAYlMjMhFSEHLgE9ATQ2MhYdARQGBAA5/m/+Ni49AQE9LlFRFx8EAAEeF1FRLj0BAT0IQP5A/gAfFwOUFx4B/uUCAgUGhTpiM0UBAUUzNEQBDmscJiY5FAkJAQEm/q0FIylTNDYCAAsPAQEPFw8P/aMi7AEN/eU1DA8PFw8PgAE9LgLXLj0BNh8Xa2sXHzYBPS79KS49AqH9yhcfHxcBIAMDCQjSoAJMOTlMAgJMOSIcjwEuRC4YEBIWIi4VBCAkQ1D+UgKGAQ8LogsQEAuiCw+GNlEBDwuiCxAQC6ILDwADAAL/fgPvA3AAKwBNAGcAAAEjNS4BJyMOAQcVIw4BBxUUFhcDHgE3ITUzFjI3MxYyNzMWNjcRPgE9AS4BAyM1NCYiBh0BIzU0JiIGBxUjNS4BIgYdASMiJicRIREUBhMUBiMhIiYnNT4BMyE1PgE3Mx4BFxUhMhYVA3/fAS8kpyQvAeAvPwEeGgEKYAYBMxUEBwO2AwcEhQZgCRoeAT+DVBAYEIwQGA8BiwEPGBBUJC8BAw4vZyAY/PIXIAEBIBcBGAEvIzgkLwEBFxggAnSoIzABATAjqAE/MDcgMg/+hlEjBAEBAQEBBCNQAXoPMiA3MD/9SN4MEBAM3t4MEBAM398MEBAM3ywoAU/+sScsAhIYICAYNxggqCMwAQEwI6ggGAAABQA3/8ED2gNPABEAIAAzAEQAXwAAASIjISYnJj4BMyEyFxYOASMGAzI7AR4BBwYHIS4BNzYzBSIjJSInJjY3NjMlIR4BFAYHIxUyOwEWFxYGBwYjBS4BNDYzATQmIg8BNTQmIgYdAScmIgYUFzEXFjI/ATE2ApxL0v7jHQgEBxgOAwQhCAQGGBBnZzlQiRcWBwke/LkXFwYIIAIjRs3+7RwJBAYKDQ8BcAFvFBYWFLwuJVQcCQQGCgwP/TcTFhYSAjQVHwotFB8ULQogFAlrCiEKawkB0AEZDBcOGgwXDgEBgAEeFBgBARwUG+YBGQwWBwkBARUiFAHoARgMFwcIAQEUIhX+2g8UCzKpDxQUD6kyCxQdCnYMDHYKAAAFADf/wQPaA00AEQAgADMARABeAAAlIiMhJicmPgE3ITIXFg4BIwYDMjsBHgEHBiMhIiY3NjcFIiMhJicmNjc2NykBMhYUBisBFTIzFxYXFgYHBgchIiY0NjMBMScmIg8BMQYUFjI/ARUUFjI2PQEXFjI2NAKcS9L+4x0IBAcYDgMEIQgEBhgQZ2c5UIkXFgcJHvy5FxcGCCACI0bN/u0cCQQGCg0PAXABbxQWFhS8LiVUHAkEBgoMD/03ExYWEgIrawohCmsJFCAKLRQfFC0KHxVbARkNFw0BGg0WDgEBgAEeFRgdFBoB5gEYDBcHCAEVIhXoAQEYCxcHCAEVIRUCv3cLC3cKHRQMMagPFBQPqDEMFB0AAAAACQCV/4EDawN+AB8ALwA9AE4AWgBrAHcAiACUAAABIzUuAScjLgEiBgcjDgEHFSMiBhURFBYXIT4BNRE0JiUzMjY3PgEyFhceATsBFSEBIREzFR4BMyEyNjc1MwUHJyYiBhQfARYyPwE2NCYiFyIGFBYzITI2NCYjBQcnJiIGFB8BFjI/ATY0JiIFIQ4BFBYzITI2NCYFBycmIgYUHwEWMj8BNjQmIgUhIgYUFhchPgE0JgNZVQEKB4IJPVQ9CYIHCgFVCAoKCAKyCAoK/b9/BwoBAyxALAMBCgd//kACJ/1yQwEKBwHkBwoBQ/4zSiEFDwoFLQYOBlYFCw5WBwoKBwEpBwoKB/58SiEFDwoFLQYOBlYFCw4Bf/7XBwoKBwEpBwoK/nVKIQUPCgUtBg4GVgULDgF//tcHCgoHASkHCgoC4TEHCgEoMjIoAQoHMQoI/MQHCgEBCgcDPAgKHwkIICkpIAgJbf0SAxg8CAoKCDzCSiEFCg8FLgUFVwUOCysKDwsLDwqlSSEFCw4GLQUFVgYOCysBCg8KCg8KpEohBgsPBS4FBVcFDgsrCg8KAQEKDwoAAAMAmv+AAzMDTQAXADQAPQAAJScmIgYUHwEhDgEUFhchBwYUFjI/ATY0ESEOAQceARczFRQWMjY1ETMRHgEyNjcRMzI2NCYBIy4BJz4BNzMDEmYIFBAIOv4kCg8PCgHcOggPFQhmCP5MV3MCAnNXNA4WD5kBDhYOAYAKDw/+djRBVwEBV0E0EmcHEBQIOgEOFg4BOggVDwhmCBQDQwJ0V1d0AuYLDw8LAk39swsPDwsCTQ4WD/6ZAldBQVcCAAAAAAMAmv+AAzMDTQAcACUAPQAAASEOAQceARczFRQWMjY1ETMRHgEyNjcRMzI2NCYBIy4BJz4BNzMBITc2LgEiDwEGFB8BFjI2NC8BIT4BNCYDGv5MV3MCAnNXNA4WD5kBDhYOAYAKDw/+djRBVwEBV0E0AUz+JToIAQ8UCGYICGYIFQ8IOgHbCw8PA00CdFdXdALmCw4OCwJN/bMLDg4LAk0OFg/+mQJXQUFXAv0AOggUEAdnCBQIZggPFQg6AQ4WDgAAAAADAD7/vgPCA0IADwAXABsAAAEhDgEHER4BFyE+ATcRLgEDJyMHIxMzEwEDMwMDUv1cL0ABAUAvAqQvQAEBQM82+DZn4m7i/uZevl0DQgFAL/1cL0ABAUAvAqQvQPzuqKgCav2WAfr+5wEZAAADAEAAAAPAAsAAFgAjAD8AAAEzPgE0JichDgEUFhczBwMGHgE2NxM2AT4BNyEeARQGByEuASUnJiIGFB8BBwYUFjI/ARcWMjY0LwE3NjQmIgcBtMwbJCQb/gAbJCQbuQEtBB02KgUtAv6IASQbAYAbJCQb/oAbJAK/VxMxJRJXVxIlMRNXVxMxJRJXVxIlMRMCQAEkNiQBASQ2JAEH/tgfMQsiHwEoEf4QGyQBASQ2JAEBJPJXEiUxE1dXEzElEldXEiUxE1dXEzElEgACACX/yQPbAzcABwBLAAABAxcWMzI3JgE3PgQ3GwEzFhcTHgEXHgEXFhceARcWHQEiJiMiBiM0PwI2PwE+ATU0Ji8BJQ4BFB4CHwEWFRQHIiYjIgYjBgHDYU47IAsWMv4rAQ0mGx0WB4egSQUCdRNTFwkxEQsJC04JAySRJSufFgJbCAYDBgQCIxcY/v4OOhAiFRYXAQEhhSIEFQIuAkH+/gEBAZH9+i0EBwULFhIBYAGeCAT+7i3NNhR+IRoHCBEDFgsPCQgYFBQCAgIFAgcFCVw3OgEhnhoSCgYCAgsWBQsMBQgAAAAABQAAABIEAAM3AA0AHQAtAD0ATQAAExEUBiIvASY0PwE2MhYBFRQGIyEiJj0BNDYzITIWNRUUBiMhIiY9ATQ2MyEyFjUVFAYjISImPQE0NjMhMhY1FRQGIyEiJj0BNDYzITIW2woQBaUFBaUFEAoDJQsH/CQHCwsHA9wHCwsH/ZIHCwsHAm4HCwsH/ZIHCwsHAm4HCwsH/CQHCwsHA9wHCwJJ/rcHCwWkBhAFpAUK/kFtCAsLCG0ICwvUbgcLCwduBwsL1G4HCwsHbggKCtRuCAoKCG4HCwsAAgBA/4ADwAMAAAcADwAAEyEVIxEjESMBIxEjESM1IUABgICAgAOA/Ij8AoABgID+gAGAAYD9AAMAgAAAAwAn/88D2QMxABgAHAAsAAA3MzI2PwEhFx4BOwE+AScDJicjIgYHAwYWATMXIwEhIgYHFR4BMyEyNjc1LgHNUQkPAz8BCEUDDwlRCwsE7AcTjAkPA9kECwEqElWyAhj8igwRAQERDAN2DBEBARG7DQmvrwkNAQ8KAkkSAQoJ/bcKDwH/xf5PEQ07DBERDDsNEQAAAAIAgACAA4AC1QALACQAABMzETMRMxEjESMRIykBIiY0PwE2NCYiBhUjPgE3HgEXFAYPASGAVatVVatVAwD/ACMyF88ZMkYyVQFhSElgAhsXzgEAAtX/AAEA/asBAP8AMkYX4BhHMjIjSGEBAWFIJD0Y3QAAAgCAAIADgALVAAsAJwAAEzMRMxEzESMRIxEjATMyFhURFAYrASImPQEzFTM1IzUzNSMVIzU0NoBVq1VVq1UCAKsjMjIjqyMyVaurq6tVMgLV/wABAP2rAQD/AAJVMiP+VSMyMiMrK6tVqysrIzIAAAIAYAAgA6EC4AAjAD0AAAEhBgcVFhczNjc1MxEjBgcVFhchNjc1JicjETMVFhczNjc1JgEjETMyNi8BJg8BBhY7AREjIgYfARY/ATYmAoj94AcBAQc4BwGoXAcBAQcBCAcBAQdcqAEHOAcBAQEKQUEEBAJlBgZkAwQEQUEEBANkBgZkAwQC4AEHgAcBAQdA/dABBzgHAQEHOAcBAjBABwEBB4AH/d8BhAgEfwYGfwQI/nwIBH8GBn8ECAAAAgCAAIADVQLVAAsAFgAAEzMRMxEzESMRIxEjITUzEQc1NzMRMxWAVatVVatVAdVWa2tVVQLV/wABAP2rAQD/AFUBnj5jPf4AVQAAAAMAgACAA4AC1QALABYAGQAAEzMRMxEzESMRIxEjITUjNRMzETMVIxUDNQeAVatVVatVAoDV1VUrK1VtAtX/AAEA/asBAP8A1VYBKv7WVtUBK5iYAAIAgACAA4AC1QALACsAABMzETMRMxEjESMRIwEzFSMVMx4BFw4BByMuASc1MxUzPgE0JicjLgEnNT4BgFWrVVWrVQIA1dVVSWACAmBJVSQwAVVVJDExJFUkMAEBMALV/wABAP2rAQD/AAJVVasBYUhJYAIBMCQrKwExSDABATAkqyQwAAMAgACAA4AC1QALACQAKAAAEzMRMxEzESMRIxEjATMeARcVIzUjFTMeARcVDgEHIy4BJxE+ARMVMzWAVatVVatVAgCrJDABVaurJDABATAkqyQwAQEwJKsC1f8AAQD9qwEA/wACVQEwJCsrqwEwJKskMAEBMCQBqyQw/qyrqwAAAgB4/6IDiQNeAC8AVgAAJSY1Ji8BJiIGFB8BITc2NCYiDwEOAR0BFBYfARYyPgEvASEHBhQWMj8CPgE1NyYBPgE9ASERIyIGFBY7ATI2NCYrAREhFRQWMjY9ATQmIyEiBh0BFBYDiAEBA2YFDgoFSf1jSQUKDgVmAgICAmYFDQoBBUkCnUkFCg4FZwEBAgEB/UUHCgERMwgJCQiICAkJCDMBEQoOCgoH/ZoHCgoeAQEDA2YFCg4FSUkFDgoFZwIFAwMCBQJoBAoNBUpKBQ4KBWYCAgQDAgIC2wEJCDP9MwoOCgoOCgLNMwgJCQhEBwoKB0QICQAAAAAFAAAAEgQAAzcADgAeAC4APgBOAAATFA8BBiImNRE0NjIfARYBFRQGIyEiJj0BNDYzITIWNRUUBiMhIiY9ATQ2MyEyFjUVFAYjISImPQE0NjMhMhY1FRQGIyEiJj0BNDYzITIWyQWlBQ8LCw8FpQUDNwsH/CQHCwsHA9wHCwsH/ZIHCwsHAm4HCwsH/ZIHCwsHAm4HCwsH/CQHCwsHA9wHCwGlCAakBQsHAUkICgWkBf7lbQgLCwhtCAsL1G4HCwsHbgcLC9RuBwsLB24ICgrUbggKCghuBwsLAAAABABQ/9ADsAMwABEAFQAZADIAAAkBJiMhDgEHER4BFyE+ATcRNCUzFSMBITUhFyM1NCYjISIGHQEjETMVFBYzITI2PQEzAQOd/v4TGv4iGyQBASQbAuAbJAH9cMDAAcD+QAHAkFASDv4ADhJQUBIOAQAOEk4BAgIbAQITASQb/SAbJAEBJBsB3hrocP2QkJCwDhISDrAC4JAOEhIOkP7+AAYAMP+wA9ADUAAQACEAMgBEAFQAWAAAASMiBh0BFBYyNj0BMzI2NCYhIyIGFBY7ARUUFjI2PQE0JgEjNTQmIgYdARQWOwEyNjQmJSIGHQEjIgYUFjsBMjY9ATQmEyEOAQcRHgEXIT4BNxEuAQERIREBcZEOEhIcEnENExMBk5EOEhIOcRIbExP+U3ESHBISDpENExMBkw4ScQ4SEg6RDRMTcvzgGyQBASQbAyAbJAEBJPzFAyACwBIOig0TEw1qEhwSEhwSag0TEw2KDhL9tmoOEhIOig4SEhwSihIOahIcEhIOig4SAlABJBv84BskAQEkGwMgGyT8oQMg/OAAAAAGAGD/wAOgA0AADwAfADMAPwBLAFcAAAEhDgEHER4BFyE+ATcRLgEDFAYjISImNRE0NjMhMhYVNyEiBhQWMyEyFhURFBYyNjURLgEBISIGFBYzITI2NCYHISIGFBYzITI2NCYHIyIGFBYXMz4BNCYC0P3gIi0BAS0iAiAiLQEBLRIJB/3gBwkJBwIgBwlw/eAOEhIOAiAHCRIcEgEt/u7+wA4SEg4BQA4SEg7+wA4SEg4BQA4SEo7ADhISDsAOEhICwAEtIv2gIi0BAS0iAmAiLf1RBwkJBwJgBwkJB9ASHBIJB/2gDhISDgJgIi3+2RIcEhIcEqASHBISHBKfEhsSAQESGxIAAAAFAED/oAPAA2AAHwAjAC0AOgBHAAABIzU0JiMhIgYdASMiBhQWOwETHgEXIT4BNxMzMjY0JiUhFSEBDgEjISImJwMhAzI2NRE0JiIGFREUFiMyNjURNCYiBhURFBYDoMASDv6ADhLADhISDiJOBDUmAaImNQROIg4SEv2yAUD+wAGRAhEN/l4NEQJNAnzeDhISHBISog4SEhwSEgLwUA4SEg5QEhwS/UUlLwEBLyUCuxIcEjAw/QwMEBAMArT9mxIOAdYNExMN/ioOEhIOAdYNExMN/ioOEgADAGD/wAOmAzcABAAPABMAAAEnAQc3AScjLgEPARc3NjQBIRUhAwib/jQnvwJpgwEEDQWDm4EF/LoDQPzAAfet/lm8DQJMlwUBBXitdwQN/WtAAAABACABQAPgAbAAAwAAEyEVISADwPxAAbBwAAAAAwBA/9UDwgMyAB4AJwA/AAABITY1LgEHDgEdAQ4BByMiBhURHgEzITI2NxM2LgIBETQ7AREjIiYBAw4BIyERPgE3NTY3NhYXFAcGFjMhMhYDWf73EwJUNi4sAUo5dhsoASYcAo0lOAdKBAseKf0QA01NAQIC/0kDFQ7+AE1fAQEiFiwBHAUSEQE0EhcCJ0I0PlcFB0QzOzpTBycc/nsdJi4lAYUXLCQT/fEBhQP+dQIBov57DhEBjhBzTjs5BgExIThUDxscAAADADn/uwPXAycAEwAlACkAAAEuAQ8BFzc2FhcWBg8BFzc+AiYBBiYnJjY/AScHDgEXHgE/AScTFwEnA45U82dlM2RNsz47E0lsMmwwOQ0i/k9Msz86E0lvMm9jGk9V82dpMzcz/qkzAqpjGk9SPlI6E0lMsz9XPlcnanp0/c06E0lMsz9aPlpU82djGk9VPwGBPv7iPQAAAAUAIAAAA+ADAAASABMAHAAgACQAAAE0LwEmDwEGIi8BLgEPAQYVESEDIx4BMjY0JiIGJREhEQMhESEDgAisDAlNBQ0E/QUMBbwFAwBgQAEkNiQkNiT9PwPAQPzAA0ABDQkFaQYJXgUF/AQBBaoFB/73AeAbJCQ2JCSl/QADAP1AAoAAAAkAYAARA6AC7wADAAcACwAMABUAFgAfACAAKQAAASEVIRUhFSEVIRUhAyMeATI2NCYiBhMjHgEyNjQmIgYTIx4BMjY0JiIGASACgP2AAoD9gAKA/YCAQAEkNiQkNiQ/QAEkNiQkNiQ/QAEkNiQkNiQC4GDQYNBgApAbJCQ2JCT+tRskJDYkJP61GyQkNiQkAAQAYAAAA6ADAAADAAcACwAPAAATIRUhESEVIRMhFSERIRUhYANA/MADQPzAgAJA/cACQP3AAwBg/qBgAUBg/qBgAAAABACAAFIDdQLAAAMABwALAA8AABMhESEREzMDKQERIRETMwOAAVX+q5BukAEyAVX+q5BukAGn/qsBVQEZ/uf+qwFVARn+5wAABgA//+ADoAMpAAUADwAbAB8AIwAnAAATMzUjFTMDMwcVMzUjNzUjETMVIxUzFSMVMzUjEyEVIRUhFSEVIRUhYzdbJCNAQIBAQIBJKipJgIDgAoD9gAKA/YACgP2AAmDJN/7AWzc3Wzf+iRI3EjfJAjdg0GDQYAAABABgAAADoAMAAAMABwALAA8AABMhFSERIRUhASEVIREhFSFgA0D8wANA/MABAAJA/cACQP3AAwBg/qBgAUBg/qBgAAACACAARAPUAqAABQALAAAJAjcnNyUHFwcXAQEs/vQBDEjU1AFUSNTUSAEMAqD+0v7SQO7uQEDu7kABLgAHAED/wAPAA0AACwAXABgAIQAiACsAMgAAAQ4BBx4BFz4BNy4BAy4BJz4BNx4BFw4BASMeATI2NCYiBgUjHgEyNjQmIgYFHgEXPgE3AgC+/QUF/b6+/QUF/b6j2QQE2aOj2QQE2f6dQAEkNiQkNiQBv0ABJDYkJDYk/l8Do3p6owMDQAX9vr79BQX9vr79/MUE2aOj2QQE2aOj2QH8GyQkNiQkGxskJDYkJJt6owMDo3oAAAADANf/7QMgAwYAEwAdACYAAAEmJzU+ATc2JzQmJyERITI3Njc0ATMWFxYUBwYrAQEGByM1Mx4BFAMBIUEiLw0YAXZ1/q4BbV0/PwH+OMNCHyAgH0LDATEfQ8/PQz4BQTMRAhAoFS0xX3QB/Oc+PGc+AY8BHyFgICL+yyMC7wFFYQAAAAADAF7/4AOdAyAACwATABcAAAEhIgYUFhchPgE0JiUzNSE1IRUhETMRIwN9/QANEhINAwAOEhL+NXABIP1QASBwcAGKEhsSAQESGxI28HBw/lD+4AAEACEAAAPgA2AABwALAA4AJwAACQEzNyEXMwEDEzMTBQchAw4BFSE1IzY3PgE1NCYjIgcXNjMyFhUUBgE7/uZ8PAEmPHv+56JwAnABc5ABINorOwEgnwkqOylHPXQaXwkhEBUhAwf8+a2tAwf+DgFT/q014AKHIlsxUBAhLzomNkFnDyYVERYqAAAAAAEAwP/AA0ADIAALAAABESERIxEzESERMxEC4P5AYGABwGADIP6AAYD8oAGg/mADYAAAAAACAID/ygOAAyYAEQAdAAAlPgE3ESMRDgEHLgEnESMRHgEFISIGFBYXIT4BNCYCAIWwA3ACcVVVcQJwA7AB5f1ADhISDgLADhISVQOwhQGZ/mdVcQICcVUBmf5nhbBOEhsSAQESGxIAAAEA4P/qAyADKgAbAAABISIGFBYXMwMjIgYUFhchPgE0JisBEzM+ATQmAwD+4A4SEg5g5loOEhIOASAOEhIOXudXDhISAyoSGxIB/UASGxIBARIbEgLAARIbEgAAAgCi/+YDgAMSAAcACgAABTcBIwEzNyElGwEDGWf+vVr+v2ZDAYr+nJ+fGgIDKvzWqGABjv5yAAAEAGAAAAOgAwAAAwAHAAsADwAAEyEVIREhFSERIRUhESEVIWADQPzAA0D8wAJA/cACQP3AAwBg/qBgAUBg/qBgAAAAAAQAGgAvA+4CvwALABcAIwAvAAABAiADDgEXFiA3NiYHBiAnJjQ3NiAXHgEBDgEHHgEXPgE3LgEHIi4BND4BMx4BFAYD0uP+K+QbARvPAgDPGwFLvv5AvgsM0gGW0wsB/lJffwICf19ffwICf58RHhERHhEbJCQBugEF/vsgUCH6+iFQSOTkDiIO8fEOIgEAAn9fX38CAn9fX3/eER4iHhEBJDYkAAAAAAQAIf+5A+ADJwACAAoADgAmAAABIRclATM3IRczAQMTMxMBNjc+ATU0JiMiBxc2MzIWFRQOAhUhNQPA/uCQ/gv+5nw8ASY8e/7nonACcAFkCSo7KUc9dBpfCSEQFSFYOwEgAyDg5/z5ra0DB/4OAVP+rf7UECEvOiY2QWcPJhURFipFWzFQAAAEAGAAAAOgAwAAAwAHAAsADwAAEyEVIREhFSERIRUhESEVIWADQPzAA0D8wANA/MADQPzAAwBg/qBgAUBg/qBgAAAAAAEAMgBGA+ICrwAPAAABNjIWFAcBDgEnASY+ARcBA6sKGhMJ/eYJGQr+rQ4HIg8BPAKlChMaCv3YCQEIASQMJAwM/vEAAQCLABsDZQL1ABoAAAkBNjQmIgcJASYiBhQXCQEGHgE3CQEWMjY0JwInATQKExoK/sz+ywoZFAoBNP7MDQojDQE1ATQKGhMKAYoBNAoaEwn+ywE1CRMaCv7M/ssOIwkMATX+ywkTGgoAAAAAAwBAABgDwALNABEAJgA5AAABNzYWFxEOAS8BIyImNRE0NjMBBiImNDc+ATU0JicmPgEXHgEVFAYXBi4BNz4BNCYnJj4BMhceARQGAQTNDyQBASQP0p8OEhIOAj8KGRMJHyEcHAwLJA0jJStwDSQJDDo9OzcJARMaCUBERwIbpAwRFP2eFBEMqBIOAQgOEv6VCRMaCh5PLChKHg4jCA4nYDQ5ZrMNCSMOO5ellDoKGhIKRKq/rQAAAAAAEgDeAAEAAAAAAAAAFQAsAAEAAAAAAAEACABUAAEAAAAAAAIABwBtAAEAAAAAAAMACACHAAEAAAAAAAQACACiAAEAAAAAAAUACwDDAAEAAAAAAAYACADhAAEAAAAAAAoAKwFCAAEAAAAAAAsAEwGWAAMAAQQJAAAAKgAAAAMAAQQJAAEAEABCAAMAAQQJAAIADgBdAAMAAQQJAAMAEAB1AAMAAQQJAAQAEACQAAMAAQQJAAUAFgCrAAMAAQQJAAYAEADPAAMAAQQJAAoAVgDqAAMAAQQJAAsAJgFuAAoAQwByAGUAYQB0AGUAZAAgAGIAeQAgAGkAYwBvAG4AZgBvAG4AdAAKAAAKQ3JlYXRlZCBieSBpY29uZm9udAoAAGkAYwBvAG4AZgBvAG4AdAAAaWNvbmZvbnQAAFIAZQBnAHUAbABhAHIAAFJlZ3VsYXIAAGkAYwBvAG4AZgBvAG4AdAAAaWNvbmZvbnQAAGkAYwBvAG4AZgBvAG4AdAAAaWNvbmZvbnQAAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAAVmVyc2lvbiAxLjAAAGkAYwBvAG4AZgBvAG4AdAAAaWNvbmZvbnQAAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAAcwB2AGcAMgB0AHQAZgAgAGYAcgBvAG0AIABGAG8AbgB0AGUAbABsAG8AIABwAHIAbwBqAGUAYwB0AC4AAEdlbmVyYXRlZCBieSBzdmcydHRmIGZyb20gRm9udGVsbG8gcHJvamVjdC4AAGgAdAB0AHAAOgAvAC8AZgBvAG4AdABlAGwAbABvAC4AYwBvAG0AAGh0dHA6Ly9mb250ZWxsby5jb20AAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOwAAAAEAAgECAQMBBAEFAQYBBwEIAQkBCgELAQwBDQEOAQ8BEAERARIBEwEUARUBFgEXARgBGQEaARsBHAEdAR4BHwEgASEBIgEjASQBJQEmAScBKAEpASoBKwEsAS0BLgEvATABMQEyATMBNAE1ATYBNwE4ATkEcmVkbwlzZWxlY3RhbGwHcHJldmlldwR1bmRvBGRhdGUHY2xlYXJ1cBU3MjNiaWFuamlxaV9kdWFuaG91anUWNzIyYmlhbmppcWlfZHVhbnFpYW5qdQotY2hlY2tsaXN0DWRpcmVjdGlvbi1sdHINZGlyZWN0aW9uLXJ0bAtmb250Ymdjb2xvcg1jbGVhcmVkZm9ybWF0BGZvbnQHb3V0ZGVudAhmb250c2l6ZQp0ZXh0X2NvbG9yD2Zvcm1hdC1oZWFkZXItMg9mb3JtYXQtaGVhZGVyLTMLbGluZS1oZWlnaHQPZm9ybWF0LWhlYWRlci0xD2Zvcm1hdC1oZWFkZXItNA9mb3JtYXQtaGVhZGVyLTUPZm9ybWF0LWhlYWRlci02EUNoYXJhY3Rlci1TcGFjaW5nBmluZGVudAZiYW9jdW4IcXVhbnBpbmcFZnV6aGkHc2hhbmNodQxiaWFuamlzZWt1YWkJZmVuZ2V4aWFuB2RpYW56YW4MY2hhcnVsaWFuamllC2NoYXJ1dHVwaWFuCnd1eHVwYWlsaWUManV6aG9uZ2R1aXFpB3lpbnlvbmcLeW91eHVwYWlsaWUIeW91ZHVpcWkJeml0aWRhaW1hCHhpYW9saWFuCXppdGlqaWFjdQ96aXRpc2hhbmNodXhpYW4Neml0aXNoYW5nYmlhbwp6aXRpYmlhb3RpDnppdGl4aWFodWF4aWFuCXppdGl4aWV0aQl6aXRpeWFuc2UIenVvZHVpcWkJeml0aXl1bGFuC3ppdGl4aWFiaWFvC3p1b3lvdWR1aXFpB2R1aWdvdXgGZ3VhbmJpDnNoZW5neWluX3NoaXRpAAAAAAAB//8AAgABAAAADAAAABYAAAACAAEAAwA6AAEABAAAAAIAAAAAAAAAAQAAAADVpCcIAAAAANhk6GIAAAAA2GToYg==') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-redo:before {
+  content: "\e627";
+}
+
+.icon-undo:before {
+  content: "\e633";
+}
+
+.icon-indent:before {
+  content: "\eb28";
+}
+
+.icon-outdent:before {
+  content: "\e6e8";
+}
+
+.icon-fontsize:before {
+  content: "\e6fd";
+}
+
+.icon-format-header-1:before {
+  content: "\e860";
+}
+
+.icon-format-header-4:before {
+  content: "\e863";
+}
+
+.icon-format-header-5:before {
+  content: "\e864";
+}
+
+.icon-format-header-6:before {
+  content: "\e865";
+}
+
+.icon-clearup:before {
+  content: "\e64d";
+}
+
+.icon-preview:before {
+  content: "\e631";
+}
+
+.icon-date:before {
+  content: "\e63e";
+}
+
+.icon-fontbgcolor:before {
+  content: "\e678";
+}
+
+.icon-clearedformat:before {
+  content: "\e67e";
+}
+
+.icon-font:before {
+  content: "\e684";
+}
+
+.icon-723bianjiqi_duanhouju:before {
+  content: "\e65f";
+}
+
+.icon-722bianjiqi_duanqianju:before {
+  content: "\e660";
+}
+
+.icon-text_color:before {
+  content: "\e72c";
+}
+
+.icon-format-header-2:before {
+  content: "\e75c";
+}
+
+.icon-format-header-3:before {
+  content: "\e75d";
+}
+
+.icon--checklist:before {
+  content: "\e664";
+}
+
+.icon-baocun:before {
+  content: "\ec09";
+}
+
+.icon-line-height:before {
+  content: "\e7f8";
+}
+
+.icon-quanping:before {
+  content: "\ec13";
+}
+
+.icon-direction-rtl:before {
+  content: "\e66e";
+}
+
+.icon-direction-ltr:before {
+  content: "\e66d";
+}
+
+.icon-selectall:before {
+  content: "\e62b";
+}
+
+.icon-fuzhi:before {
+  content: "\ec7a";
+}
+
+.icon-shanchu:before {
+  content: "\ec7b";
+}
+
+.icon-bianjisekuai:before {
+  content: "\ec7c";
+}
+
+.icon-fengexian:before {
+  content: "\ec7f";
+}
+
+.icon-dianzan:before {
+  content: "\ec80";
+}
+
+.icon-charulianjie:before {
+  content: "\ec81";
+}
+
+.icon-charutupian:before {
+  content: "\ec82";
+}
+
+.icon-wuxupailie:before {
+  content: "\ec83";
+}
+
+.icon-juzhongduiqi:before {
+  content: "\ec84";
+}
+
+.icon-yinyong:before {
+  content: "\ec85";
+}
+
+.icon-youxupailie:before {
+  content: "\ec86";
+}
+
+.icon-youduiqi:before {
+  content: "\ec87";
+}
+
+.icon-zitidaima:before {
+  content: "\ec88";
+}
+
+.icon-xiaolian:before {
+  content: "\ec89";
+}
+
+.icon-zitijiacu:before {
+  content: "\ec8a";
+}
+
+.icon-zitishanchuxian:before {
+  content: "\ec8b";
+}
+
+.icon-zitishangbiao:before {
+  content: "\ec8c";
+}
+
+.icon-zitibiaoti:before {
+  content: "\ec8d";
+}
+
+.icon-zitixiahuaxian:before {
+  content: "\ec8e";
+}
+
+.icon-zitixieti:before {
+  content: "\ec8f";
+}
+
+.icon-zitiyanse:before {
+  content: "\ec90";
+}
+
+.icon-zuoduiqi:before {
+  content: "\ec91";
+}
+
+.icon-zitiyulan:before {
+  content: "\ec92";
+}
+
+.icon-zitixiabiao:before {
+  content: "\ec93";
+}
+
+.icon-zuoyouduiqi:before {
+  content: "\ec94";
+}
+
+.icon-duigoux:before {
+  content: "\ec9e";
+}
+
+.icon-guanbi:before {
+  content: "\eca0";
+}
+
+.icon-shengyin_shiti:before {
+  content: "\eca5";
+}
+
+.icon-Character-Spacing:before {
+  content: "\e964";
+}

pages/component/editor/editor.uvue

+<template>
+	<view class="container">
+		<view class="page-body">
+			<view class='wrapper'>
+				<view class='toolbar' @tap="format">
+					<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu"
+            data-name="bold"></view>
+					<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti"
+            data-name="italic"></view>
+					<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian"
+						data-name="underline"></view>
+					<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian"
+						data-name="strike"></view>
+
+					<view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi"
+						data-name="align" data-value="left"></view>
+
+					<view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi"
+						data-name="align" data-value="center"></view>
+					<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi"
+						data-name="align" data-value="right"></view>
+					<view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi"
+						data-name="align" data-value="justify"></view>
+
+					<view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height"
+						data-name="lineHeight" data-value="2"></view>
+					<view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing"
+						data-name="letterSpacing" data-value="2em"></view>
+					<view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju"
+						data-name="marginTop" data-value="20px"></view>
+					<view :class="formats.marginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju"
+						data-name="marginBottom" data-value="20px"></view>
+					<view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
+					<view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font"
+						data-name="fontFamily" data-value="Pacifico"></view>
+					<view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize"
+						data-name="fontSize" data-value="24px"></view>
+					<view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color"
+						data-name="color" data-value="#0000ff"></view>
+					<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
+						class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00ff00"></view>
+					<view class="iconfont icon-date" @tap="insertDate"></view>
+					<view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
+					<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie"
+						data-name="list" data-value="ordered"></view>
+					<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie"
+						data-name="list" data-value="bullet"></view>
+					<view class="iconfont icon-undo" @tap="undo"></view>
+					<view class="iconfont icon-redo" @tap="redo"></view>
+					<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
+					<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
+					<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
+					<view class="iconfont icon-charutupian" @tap="insertImage"></view>
+					<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1"
+						data-name="header" :data-value="1"></view>
+					<view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao"
+						data-name="script" data-value="sub"></view>
+					<view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao"
+						data-name="script" data-value="super"></view>
+					<view class="iconfont icon-shanchu" @tap="clear"></view>
+					<view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl"
+						data-name="direction" data-value="rtl"></view>
+				</view>
+
+				<view class="editor-wrapper">
+					<editor id="editor" class="ql-container" placeholder="开始输入..." show-img-size show-img-toolbar
+						show-img-resize @statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady">
+					</editor>
+				</view>
+				<view>
+					<button @tap="getCon">打印文本内容</button>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="uts">
+  type Context = {
+  	id?: string;
+  	pageId?: number;
+  }
+
+	export default {
+		data() {
+			return {
+				readOnly: false,
+				formats: {},
+        editorCtx:{} as Context
+			}
+		},
+		onLoad() {
+			uni.loadFontFace({
+				family: 'Pacifico',
+				source: 'url("/static/font/Pacifico-Regular.ttf")',
+				success() {
+					console.log('success load font')
+				},
+				fail() {
+					console.log('fail load font load')
+				}
+			})
+		},
+		methods: {
+			readOnlyChange() {
+				this.readOnly = !this.readOnly
+			},
+			onEditorReady() {
+				uni.createSelectorQuery().select('#editor').context((res) => {
+					this.editorCtx = res.context
+				}).exec()
+			},
+      getCon() {
+      	this.editorCtx.getContents({
+      		success: (res) => {
+      			console.log('文本详情：', res)
+      		},
+      		fail: (err) => {
+      			console.log(err)
+      		}
+      	})
+      },
+			undo() {
+				this.editorCtx.undo()
+			},
+			redo() {
+				this.editorCtx.redo()
+			},
+			format(e) {
+				let {
+					name,
+					value
+				} = e.target.dataset
+				if (!name) return
+				// console.log('format', name, value)
+				this.editorCtx.format(name, value)
+			},
+			onStatusChange(e) {
+				const formats = e.detail
+				this.formats = formats
+			},
+			insertDivider() {
+				this.editorCtx.insertDivider({
+					success: function() {
+						console.log('insert divider success')
+					}
+				})
+			},
+			clear() {
+				uni.showModal({
+					title: '清空编辑器',
+					content: '确定清空编辑器全部内容？',
+					success: res => {
+						if (res.confirm) {
+							this.editorCtx.clear({
+								success: function(res) {
+									console.log("clear success")
+								}
+							})
+						}
+					}
+				})
+			},
+			removeFormat() {
+				this.editorCtx.removeFormat()
+			},
+			insertDate() {
+				const date = new Date()
+				const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
+				this.editorCtx.insertText({
+					text: formatDate
+				})
+			},
+			insertImage() {
+				uni.chooseImage({
+					count: 1,
+					success: (res) => {
+						this.editorCtx.insertImage({
+							src: res.tempFilePaths[0],
+							alt: '图像',
+							success: function() {
+								console.log('insert image success')
+							}
+						})
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	@import "./editor-icon.css";
+
+	.page-body {
+		height: calc(100vh - var(--window-top) - var(--status-bar-height));
+	}
+
+	.wrapper {
+		height: 100%;
+	}
+
+	.editor-wrapper {
+		height: calc(100vh - var(--window-top) - var(--status-bar-height) - 80px - 46px);
+		background: #fff;
+	}
+
+	.iconfont {
+		display: inline-block;
+		padding: 8px 8px;
+		width: 30px;
+		height: 30px;
+		cursor: pointer;
+		font-size: 20px;
+	}
+
+	.toolbar {
+		box-sizing: border-box;
+		border-bottom: 0;
+		font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+    flex-direction: row;
+    flex-wrap: wrap;
+    height: 110px;
+	}
+
+	.ql-container {
+		box-sizing: border-box;
+		padding: 12px 15px;
+		width: 100%;
+		min-height: 30vh;
+		height: 100%;
+		font-size: 16px;
+		line-height: 1.5;
+	}
+
+	.ql-active {
+		color: #06c;
+	}
+</style>

pages/component/label/label.uvue

+<template>
+  <view>
+    <page-head :title="title"></page-head>
+    <view class="uni-common-mt">
+      <view class="uni-form-item uni-column">
+        <view class="title">表单组件在label内</view>
+        <checkbox-group class="uni-list" @change="checkboxChange">
+          <label class="uni-list-cell uni-list-cell-pd" v-for="item in checkboxItems" :key="item.name">
+            <view>
+              <checkbox :value="item.name" :checked="item.checked"></checkbox>
+            </view>
+            <view>{{item.value}}</view>
+          </label>
+        </checkbox-group>
+      </view>
+
+      <view class="uni-form-item uni-column">
+        <view class="title">label用for标识表单组件</view>
+        <radio-group class="uni-list" @change="radioChange">
+          <view class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in radioItems" :key="index">
+            <view>
+              <radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
+            </view>
+            <label class="label-2-text" :for="item.name">
+              <text>{{item.value}}</text>
+            </label>
+          </view>
+        </radio-group>
+      </view>
+
+      <view class="uni-form-item uni-column">
+        <view class="title">label内有多个时选中第一个</view>
+        <checkbox-group class="uni-list" @change="checkboxChange">
+          <label class="label-3">
+            <view class="uni-list-cell uni-list-cell-pd">
+              <checkbox>选项一</checkbox>
+            </view>
+            <view class="uni-list-cell uni-list-cell-pd">
+              <checkbox>选项二</checkbox>
+            </view>
+            <view class="uni-link uni-center" style="margin:20rpx 0;">点击该label下的文字默认选中第一个checkbox</view>
+          </label>
+        </checkbox-group>
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="uts">
+  export default {
+    data() {
+      return {
+        title: 'label',
+        checkboxItems: [{
+          name: 'USA',
+          value: '美国'
+        },
+        {
+          name: 'CHN',
+          value: '中国',
+          checked: 'true'
+        }
+        ],
+        radioItems: [{
+          name: 'USA',
+          value: '美国'
+        },
+        {
+          name: 'CHN',
+          value: '中国',
+          checked: 'true'
+        }
+        ],
+        hidden: false
+      }
+    },
+    methods: {
+      checkboxChange: function (e) {
+        var checked = e.detail.value
+        console.log(checked)
+      },
+      radioChange: function (e) {
+        var checked = e.detail.value
+        console.log(checked)
+      }
+    }
+  }
+</script>
+
+<style>
+  .uni-list-cell {
+    justify-content: flex-start
+  }
+
+  .uni-list .label-3 {
+    padding: 0;
+  }
+
+  .label-2-text {
+    flex: 1;
+  }
+  .uni-form-item{
+  	display:flex;
+  	width:100%;
+  	padding:10rpx 0;
+  }
+  .uni-form-item .title{
+  	padding:10rpx 25rpx;
+  }
+  radio-group{
+  	padding: 0 20rpx;
+  }
+  checkbox-group label{
+  	margin: 0 20rpx;
+  }
+</style>

pages/component/map/map.uvue

+<template>
+	<view>
+		<page-head :title="title"></page-head>
+		<view class="uni-common-mt">
+			<view>
+				<map :latitude="latitude" :longitude="longitude" :markers="covers">
+				</map>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+	export default {
+		data() {
+			return {
+				title: 'map',
+				latitude: 39.909,
+				longitude: 116.39742,
+				covers: [{
+					id: 1,
+					latitude: 39.9085,
+					longitude: 116.39747,
+					iconPath: '../../../static/location.png',
+				}, {
+					id: 2,
+					latitude: 39.90,
+					longitude: 116.39,
+					iconPath: '../../../static/location.png',
+				}]
+			}
+		}
+	}
+</script>
+<style>
+	map {
+		width: 100%;
+		height: 600rpx;
+	}
+</style>

pages/component/movable-view/movable-view.uvue

+<template>
+	<view class="page-body">
+		<page-head title="movable-view,可拖动视图"></page-head>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-title uni-common-mt">
+				示例 1
+				<text>\nmovable-view 区域小于 movable-area</text>
+			</view>
+			<movable-area>
+				<movable-view :x="x" :y="y" direction="all" @change="onChange">text</movable-view>
+			</movable-area>
+			<view @tap="tap" class="uni-link uni-center uni-common-mt">
+				点击这里移动至 (30px, 30px)
+			</view>
+			<view class="uni-title uni-common-mt">
+				示例 2
+				<text>\nmovable-view区域大于movable-area</text>
+			</view>
+			<movable-area>
+				<movable-view class="max" direction="all">text</movable-view>
+			</movable-area>
+			<view class="uni-title uni-common-mt">
+				示例 3
+				<text>\n只可以横向移动</text>
+			</view>
+			<movable-area>
+				<movable-view direction="horizontal">text</movable-view>
+			</movable-area>
+			<view class="uni-title uni-common-mt">
+				示例 4
+				<text>\n只可以纵向移动</text>
+			</view>
+			<movable-area>
+				<movable-view direction="vertical">text</movable-view>
+			</movable-area>
+			<view class="uni-title uni-common-mt">
+				示例 5
+				<text>\n可超出边界</text>
+			</view>
+			<movable-area>
+				<movable-view direction="all" out-of-bounds>text</movable-view>
+			</movable-area>
+			<view class="uni-title uni-common-mt">
+				示例 6
+				<text>\n带有惯性</text>
+			</view>
+			<movable-area>
+				<movable-view direction="all" inertia>text</movable-view>
+			</movable-area>
+			<view class="uni-title uni-common-mt">
+				示例 7
+				<text>\n可放缩</text>
+			</view>
+			<movable-area scale-area>
+				<movable-view direction="all" @scale="onScale" scale scale-min="0.5" scale-max="4" :scale-value="scale">text</movable-view>
+			</movable-area>
+			<view @tap="tap2" class="uni-link uni-center uni-common-mt" style="padding-bottom:80rpx;">
+				点击这里放大3倍
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="uts">
+	export default {
+		data() {
+			return {
+				x: 0,
+				y: 0,
+				scale: 2,
+				old: {
+					x: 0,
+					y: 0,
+					scale: 2
+				}
+			}
+		},
+		methods: {
+			tap: function(e) {
+				// 解决view层不同步的问题
+				this.x = this.old.x
+				this.y = this.old.y
+				this.$nextTick(function() {
+					this.x = 30
+					this.y = 30
+				})
+			},
+			tap2() {
+				// 解决view层不同步的问题
+				this.scale = this.old.scale
+				this.scale = this.old.scale
+				this.$nextTick(function() {
+					this.scale = 3
+				})
+			},
+			onChange: function(e) {
+				this.old.x = e.detail.x
+				this.old.y = e.detail.y
+			},
+			onScale: function(e) {
+				this.old.scale = e.detail.scale
+			}
+		}
+	}
+</script>
+
+<style>
+	movable-view {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 150rpx;
+		width: 150rpx;
+		background-color: #007AFF;
+		color: #fff;
+	}
+
+	movable-area {
+		height: 300rpx;
+		width: 100%;
+		background-color: #D8D8D8;
+		overflow: hidden;
+	}
+
+	.max {
+		width:500rpx;
+		height: 500rpx;
+	}
+</style>

pages/component/picker/picker.uvue

+<template>
+	<view>
+		<page-head :title="title"></page-head>
+		<view class="uni-title uni-common-pl">普通选择器</view>
+		<view class="uni-list">
+			<view class="uni-list-cell">
+				<view class="uni-list-cell-left">
+					当前选择
+				</view>
+				<view class="uni-list-cell-db">
+					<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
+						<view class="uni-input">{{array[index].name}}</view>
+					</picker>
+				</view>
+			</view>
+		</view>
+
+		<view class="uni-title uni-common-pl">多列选择器</view>
+		<view class="uni-list">
+			<view class="uni-list-cell">
+				<view class="uni-list-cell-left">
+					当前选择
+				</view>
+				<view class="uni-list-cell-db">
+					<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
+						<view class="uni-input">{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}</view>
+					</picker>
+				</view>
+			</view>
+		</view>
+
+		<view class="uni-title uni-common-pl">时间选择器</view>
+		<view class="uni-list">
+			<view class="uni-list-cell">
+				<view class="uni-list-cell-left">
+					当前选择
+				</view>
+				<view class="uni-list-cell-db">
+					<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
+						<view class="uni-input">{{time}}</view>
+					</picker>
+				</view>
+			</view>
+		</view>
+		<view class="uni-picker-tips">
+			注：选择 09:01 ~ 21:01 之间的时间, 不在区间内不能选中
+		</view>
+
+		<view class="uni-title uni-common-pl">日期选择器</view>
+		<view class="uni-list">
+			<view class="uni-list-cell">
+				<view class="uni-list-cell-left">
+					当前选择
+				</view>
+				<view class="uni-list-cell-db">
+					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
+						<view class="uni-input">{{date}}</view>
+					</picker>
+				</view>
+			</view>
+		</view>
+		<view class="uni-picker-tips">
+			注：选择当前时间 ±10 年之间的时间, 不在区间内不能选中
+		</view>
+	</view>
+</template>
+<script lang="uts">
+
+	function getDate(type?:string):string {
+		const date = new Date();
+
+		let year:string | number = date.getFullYear();
+		let month:string | number = date.getMonth() + 1;
+		let day:string | number = date.getDate();
+
+		if (type === 'start') {
+			year = year - 10;
+		} else if (type === 'end') {
+			year = year + 10;
+		}
+		month = month > 9 ? month : '0' + month;;
+		day = day > 9 ? day : '0' + day;
+
+		return `${year}-${month}-${day}`;
+	}
+	export default {
+		data() {
+			return {
+				title: 'picker',
+				array: [{name:'中国'},{name: '美国'}, {name:'巴西'}, {name:'日本'}],
+				index: 0,
+				multiArray: [
+					['亚洲', '欧洲'],
+					['中国', '日本'],
+					['北京', '上海', '广州']
+				],
+				multiIndex: [0, 0, 0],
+        date:getDate(),
+				startDate:getDate('start'),
+				endDate:getDate('end'),
+				time: '12:01'
+			}
+		},
+		methods: {
+			bindPickerChange: function(e) {
+				console.log('picker发送选择改变，携带值为：' + e.detail.value)
+				this.index = e.detail.value
+			},
+			bindMultiPickerColumnChange: function(e) {
+				console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
+				this.multiIndex[e.detail.column] = e.detail.value
+				switch (e.detail.column) {
+					case 0: //拖动第1列
+						switch (this.multiIndex[0]) {
+							case 0:
+								this.multiArray[1] = ['中国', '日本']
+								this.multiArray[2] = ['北京', '上海', '广州']
+								break
+							case 1:
+								this.multiArray[1] = ['英国', '法国']
+								this.multiArray[2] = ['伦敦', '曼彻斯特']
+								break
+						}
+						this.multiIndex.splice(1, 1, 0)
+						this.multiIndex.splice(2, 1, 0)
+						break
+					case 1: //拖动第2列
+						switch (this.multiIndex[0]) { //判断第一列是什么
+							case 0:
+								switch (this.multiIndex[1]) {
+									case 0:
+										this.multiArray[2] = ['北京', '上海', '广州']
+										break
+									case 1:
+										this.multiArray[2] = ['东京','北海道']
+										break
+								}
+								break
+							case 1:
+								switch (this.multiIndex[1]) {
+									case 0:
+										this.multiArray[2] = ['伦敦', '曼彻斯特']
+										break
+									case 1:
+										this.multiArray[2] = ['巴黎', '马赛']
+										break
+								}
+								break
+						}
+						this.multiIndex.splice(2, 1, 0)
+						break
+				}
+				this.$forceUpdate()
+			},
+			bindDateChange: function(e) {
+				this.date = e.detail.value
+			},
+			bindTimeChange: function(e) {
+				this.time = e.detail.value
+			}
+		}
+	}
+</script>
+
+<style>
+.uni-picker-tips {
+	font-size: 12px;
+	color: #666;
+	margin-bottom: 15px;
+	padding: 0 15px;
+}
+</style>

pages/tabBar/component.uvue

@@ -66,17 +66,15 @@
               },
               {
                 name: 'swiper',
-              },
-              /*
-                {
-                  name: 'movable-view',
-                  enable: false
-                },
-                {
-                  name: 'cover-view',
-                  enable: false
-                },
-                */
+              },
+              // #ifdef WEB
+              {
+                name: 'movable-view'
+              },
+              {
+                name: 'cover-view'
+              },
+              // #endif
               {
                 name: 'list-view',
               },
@@ -127,14 +125,18 @@
               },
               {
                 name: 'input',
-              },
-              /*
-              {
-                name: 'label',
-              }, {
-                name: 'picker',
-              },
-              */
+              },
+              // #ifdef WEB
+              {
+                name: 'editor',
+              },
+              {
+                name: 'label',
+              },
+              {
+                name: 'picker',
+              },
+              // #endif
               {
                 name: 'picker-view',
               },
@@ -153,12 +155,6 @@
               {
                 name: 'textarea',
               },
-              /*
-                {
-                  name: 'editor',
-                  enable: false
-                },
-                */
             ] as Page[],
           },
           {
@@ -186,18 +182,18 @@
                 enable: false,
               }, */
             ] as Page[],
+          },
+          // #ifdef WEB
+          {
+            id: 'map',
+            name: '地图',
+            pages: [
+              {
+                name: 'map',
+              }
+            ] as Page[]
           },
           // {
-          //   id: 'map',
-          //   name: '地图',
-          //   pages: [
-          //     {
-          //       name: 'map',
-          //       enable: false
-          //     }
-          //   ] as Page[]
-          // },
-          // {
           //   id: 'canvas',
           //   name: '画布',
           //   pages: [
@@ -205,7 +201,8 @@
           //       name: 'canvas'
           //     }
           //   ] as Page[]
-          // },
+          // },
+          // #endif
           {
             id: 'web-view',
             name: '网页',